Attaching a click event to an appended item
I just started working with jQuery not too long ago, and having a hard time figuring out how to attach a click event to something that you just appended. I want to convert the below into 1 chained thing:
-
/*start*/
$("div#new_responsea,div#new_responseb,div#new_responsec,div#new_responsed,div#new_responsee,div#new_responsef,div#new_responseag").each(
function()
{
id = $(this).attr('id') + "_check";
oldId = $(this).attr('id');
strAppend = "<input type=checkbox id=" + id + " name=" + id + " oldid=" + oldId + ">";
td = $(this).parent('td');
$(this).hide();
$(td).append(strAppend);
}
);
$("#new_responsea_check,#new_responseb_check,#new_responsec_check,#new_responsed_check,#new_responsee_check,#new_responsef_check,#new_responseg_check").
each(
function()
{
this.checked = crmForm.all[$(this).attr('oldid')].DataValue;
}
).click
(
function()
{
crmForm.all[$(this).attr('oldid')].DataValue = this.checked;
}
);
/*end*/
Long story short to the "why" of this: I'm working on a project where the HTML is largely generated for me and I have little control over how it comes out. I have a bunch of "yes/no" boxes but they are radio buttons. I have no control over how the HTML comes out - but, I can use javascript to modify it. I want to convert these to check boxes. But, still have it so when you check the check boxes the related elements get checked/unchecked accordingly so they can get pushed back to the server.
[/code]
I tried putting the .click() after the .append, but it kept attaching the click event to the TD, not the new input box