Use jquery live to add events to a column
Use jquery live to add events to a column
Based on some posts I've seen, I tried an experiment to use live to bind a column to events, and it seems to be a very simple and elegant solution.
This example would bind the second column to the clicked event... (jgrowl is another excellent plugin for, among other things, posting quick messages to the screen during debuging).
[code]
$("#example td:nth-child(2)").live("click", function () {
$.jGrowl("2nd column clicked");
});
[/code]
another option I'm using to bind to a detail button is simply set up the detail image from an ajax call:
[code]
This example would bind the second column to the clicked event... (jgrowl is another excellent plugin for, among other things, posting quick messages to the screen during debuging).
[code]
$("#example td:nth-child(2)").live("click", function () {
$.jGrowl("2nd column clicked");
});
[/code]
another option I'm using to bind to a detail button is simply set up the detail image from an ajax call:
[code]
This discussion has been closed.
Replies
At the risk of being rather egotistical, here is a piece of software of mine which can help debugging events: http://sprymedia.co.uk/article/Visual+Event . It shows which elements have events attached to them, and what those events are.
Regards,
Allan
I really like Visual Event! We'll definitely be using it... thanks!
Patrick
I've been following and trying to implement this "live" thing and am able to make it work as shown in the code above. When hooking datatables up to an Ajax source, do you know if using "live" is "better" (faster?) than using the API calls as mentioned in this thread, http://datatables.net/forums/comments.php?DiscussionID=200&page=1#Item_0
This leads me to my real question :) How can I get the value of the TR that is in a hidden first column using this "live" event?
Using live events is probably good for Ajax sourced data for a couple of reasons - firstly it reduces chance of memory leaks if you reload / delete rows. It can also make life that little bit easier since it's a simple single call - I don't think there are any significant downsides to them (they are internally more complex of course, but jQuery deals with that for us :-) ).
So to get the value of a TD element, all you need to do is use fnGetData, pass it the TR element for the row you want to get the data of, and it will return an array of the data for the row, including the hidden columns.
Regards,
Allan
The situation now is that I've hooked up a click event to each row using the live method. Within each row, there is an "open"/"close" image that toggles the "details" as you've show how to do in one example. I've sorta got this going. The snag is that after I did the $('#mytable TR').live("click", ....) it seem that clicking the "open/close" details is also triggering the live click code.
How can I prevent the click event from bubbling up from the detail_open/close image into the TR?
TIA
http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29
If that doesn't do the trick, then this might be one for a jQuery forum.
Allan
When using the show details, if I use .live('click', function() .... it's ok, but I cannot use .click(function() .... or .bind('click',function()... (only in IE)
When i use the latter, the position of cells in the table get messed up.
Reason I do not use .live('click') is that the table is called as part of another page using ajax. and switching back and forth between the table and other page keep adding the click function to the row.