[jQuery] Re: click event is not listening from .html() output
You can't assign an event to an element that does not exist yet, and
the uncheckall_field does not exist until you click the first link.
You could move the event assignment into the function that creates the
uncheckall_field, but then you'd need to reassign the
checkall_field event later and you'll just go back-and-forth in a
big mess.
Instead, the simplest way to do this, off the top of my head, would be
to just have two different links, each with their respective click
events assigned, and then just toggle their visibility (actually, the
display property). You could start with the checkall visible and the
uncheckall hidden, then put the .toggle() method inside each click
event.
I don't know how you're using this, but you might not want the two
links to be exclusive. The most friendly implementation would allow
users to either uncheck or check all at any time.
Larry
On Jan 2, 3:24 pm, webophir [EMAIL PROTECTED] wrote:
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_fieldcheck 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_fielduncheck all/a');
$(#dbcolumn [EMAIL PROTECTED]'checkbox']).check('on');
return false;
});
$(#uncheckall_field).click(function() {
$(#field_check).html('a href= id=checkall_fieldcheck
all/a');
$(#dbcolumn [EMAIL PROTECTED]'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.
[jQuery] Re: click event is not listening from .html() output
Thanks!
That could solve my problem!
I'll keep in mind that the usability issue you mentioned above.
But I just wanted to exercise the forms with jQuery for myself ;).
Blessing,
On Jan 2, 3:36 pm, McLars [EMAIL PROTECTED] wrote:
You can't assign an event to an element that does not exist yet, and
the uncheckall_field does not exist until you click the first link.
You could move the event assignment into the function that creates the
uncheckall_field, but then you'd need to reassign the
checkall_field event later and you'll just go back-and-forth in a
big mess.
Instead, the simplest way to do this, off the top of my head, would be
to just have two different links, each with their respective click
events assigned, and then just toggle their visibility (actually, the
display property). You could start with the checkall visible and the
uncheckall hidden, then put the .toggle() method inside each click
event.
I don't know how you're using this, but you might not want the two
links to be exclusive. The most friendly implementation would allow
users to either uncheck or check all at any time.
Larry
On Jan 2, 3:24 pm, webophir [EMAIL PROTECTED] wrote:
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_fieldcheck 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_fielduncheck all/a');
$(#dbcolumn [EMAIL PROTECTED]'checkbox']).check('on');
return false;
});
$(#uncheckall_field).click(function() {
$(#field_check).html('a href= id=checkall_fieldcheck
all/a');
$(#dbcolumn [EMAIL PROTECTED]'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.
