[jQuery] click event is not listening from .html() output
Hey all,
I am very new to jQuery and becoming a fan of this wonderful
framework.
Please give me an idea of how to solve this problem if you know
howtos.
I am trying to create a form with many checkboxes with 'check all'
link to check all the checkboxes. It's kind of simple and it is
already in jQuery site tutorial. But what I wanted is that when I
click 'check all' link, check all checkboxes as well as change the
link text to 'uncheck all.'
Here is my code:
jQuery(document).ready(function() {
// I do not show 'check all' when javascript is disabled from
browser
$("#field_check").html('<a href="" id="checkall_field">check all</
a>');
// when 'check all' is clicked, update the html id to
'uncheckall_field' and text to uncheck all
$("#checkall_field").click(function() {
$("#field_check").html('<a href=""
id="uncheckall_field">uncheck all</a>');
$("#dbcolumn input[@type='checkbox']").check('on');
return false;
});
$("#uncheckall_field").click(function() {
$("#field_check").html('<a href="" id="checkall_field">check
all</a>');
$("#dbcolumn input[@type='checkbox']").check('off');
return false;
});
});
Ok, from the firebug debugger, I can see the #checkall_field.click
event listener is working, but after that, 'uncheck all' event
listener is skipped.
Any idea how to solve this problem?
Thanks.