jQuery: How to prevent capturing class-based events?

[End User]

I have a series of rows in a table, each with a checkbox. The <tr> elements have all been assigned a class of 'mx'. Unfortunately, the checkboxes are within the scope of the 'mx' class, so clicking on one to select rows for deleting or moving causes jQuery to fire the event that's bound to the 'mx' class. It appears to preempt everything to the point where I can't even test to see if it's a checkbox I'm clicking on so I can cancel the event that's bound to the 'mx' class. I've also tried giving the checkboxes a different class so as to be able to detect that and stop the event, but that doesn't seem to work either. Is there a way to detect that I'm clicking on the checkbox and stop the normal flow of events?

[justsomeguy]

I'm not familiar with how jQuery handles events, but take a look at event bubbling and see if that sounds like something to investigate in jQuery. If an event handler is sent an event object, you might also want to inspect that object using something like Firebug to see what methods are available, there might be a method to stop the event from propagating or stop it from doing the default action.

[End User]

Update: It looks like the way to do this is to create an additional event handler bound to the checkboxes and then use event.stopPropagation(); to stop the event from being passed up the food chain. For example, the checkboxes are assigned a class of "noclick" and this code is added:

$('.noclick').live('click', function() {   // do something....click.stopPropagation();});

event.stopPropagation(); will prevent the parent element(s) like <td> and <tr> from seeing the click event. All this new learning is hurting my brain, especially when I sit down. :)JSM,I was looking into this and I think it may be the answer, but the problem is that I can't seem to be able to detect what element is being clicked on...if I could detect that the actual element was the checkbox then I could probably cancel the row-level event...but I haven't been able to determine how to drill down to the element level. The "this" object returns "HTMLTableRowElement", but that's where I'm stopped. I'm reasonably sure there's a way to tell exactly what's been hovered over or clicked on, but I don't know how to do that.

I'm not familiar with how jQuery handles events, but take a look at event bubbling and see if that sounds like something to investigate in jQuery. If an event handler is sent an event object, you might also want to inspect that object using something like Firebug to see what methods are available, there might be a method to stop the event from propagating or stop it from doing the default action.

[justsomeguy]

That's where the event object comes in, the event object will include a reference to the element which the event was fired on among other things.http://api.jquery.com/category/events/event-object/