Ben, I have a somewhat simple jquery q for you. I have x number of divs... inside each div i have a checkbox next to each checkbox i have a span tag with some text. i want to make it where if they click on the text OR the checkbox, it will highlight that div (addClass('red')). i was looking at using the trigger and when you click on the text portion it will trigger the checkbox click() event,but when i click on the text, the last div and checkbox is checked. If i check on the checkboxes, it works fine. I did have a label tag in there at first but thought it was causing problems. Hope that makes sense. the divs with the checkboxes are generated dynamically based on an ajax call.
The way I read this question, there are three real components:
- The form elements are being built programmatically (not in original HTML).
- When a checkbox is checked or unchecked, we want to highlight or unhighlight the parent container respectively.
- When the span next to the checkbox is clicked, we want this to act like a checkbox click.
As I was going about answering this, I actually ran into some interesting behavior. I think your instincts were correct - when you click on the text, it should trigger the click event on the sibling checkbox. But, when it comes to checkboxes, it seems the order of triggered events is not in our favor. Let's look at the code, and then I will go into more detail:
After we build the form elements based on the JSON data (what I assume is coming back in the AJAX call - although if it was HTML, it wouldn't make a difference), we bind a click handler for the checkbox and click handler for the span. The click handler on the checkbox is simple - if the checkbox is checked, then add a selected class to the parent element; if the checkbox is not checked, then remove the selected class from the parent.
The click handler on the span is a bit more complicated. Ideally, what we want to do is simply trigger the click event on the checkbox if the span is clicked. However, what I found out was that the order of "Default Behavior" is not the same. When you click a checkbox, the default behavior (toggling the checked attribute) happens before the click handler is called. However, if you trigger the click handler using jQuery, the default behavior (toggling the checked attribute) happens after the click handler is called. This creates a problem because our click handler on the checkbox is going to assume that the checked attribute has already been toggled.
To get around this issue, what we have to do is toggle the checked attribute of the checkbox from within the span's click handler; then, once this is done, we have to trigger ONLY the jQuery handlers on the checkbox's click event. To do this, rather than call .click() on the checkbox, we call .triggerHandler():
jCheckbox.triggerHandler( "click" );
This will execute the click handlers without triggering the default behavior (toggling the checkbox) or bubbling the event.
I think there are ways to make this solution a bit simpler, but I hope this points you in the right direction.
Want to use code from this post? Check out the license.