I've a web page fulfilled by a JS script that creates a lot of HTML tables.
Number of <table> created can vary between 1 and 1000 with 100 cells in each of it.
My question is : how to bind efficiently the click on theses tables? Should I bind the click on each cell of the <table> or directly to the <table> itself and retrieve the cell clicked in the bind function?
Or have you another idea?
P.S: I'm using IE6+
I suggest you use delegate.
$("table").delegate("td", "click", function(){
alert($(this).text()); // alert td's text.
});
delegate will just bind one event, and that is to the context(in this example, the <table>).
As it seems that you use jQuery, you should use the delegate() method on the table, e.g.:
$('table').delegate('td', 'click', function() {
// $(this) refers the the clicked cell
});
This will bind one event handler to the table and capture the bubbled up click events.
Binding so many event handlers, i.e. an event handler to every cell, is indeed not a good idea, especially not in IE (for performance reasons).
bind event on table for faster execution and get cell details inside that function.
you can find a similar toppic here:
large table with lots of events, is using event bubbling more effecient?
i would use this way:
$("table#yourTable").click(function(evt){
if($(evt.target).is('td')) {
//do whatever you want to do
}
})
Related
I have a set of three elements. And there are many coming elements after the page load by ajax when the user clicks on a certain element. I iterate over initial elements with each and attach an event to them like this:
tagSet.each(function(index, element){
tagSet.eq(index).on("click",function(){alert("Alerted! Clicked")});
}
But with this approach those ajax-created elements would not be attached with an event. Thus I have to make a little bit of change to on() for it accommodate the ajax-created elements:
tagSet.each(function(index, element){
$(document).on("click",tagSet.eq(index),function(){alert("Alerted! Clicked")});
}
It solve the problem of event attachment to those ajax-created elements but raises another issue. It attaches the event in a way that all of the elements of the page gets trigged with that specific event at once. I mean, since I have three elements, a click on one of them cause all three alert("Alerted!Clicke!) to trigger. What is the issue and the solution?
Use event delegation to bind to all current and future items that match a query:
$(document).on("click", ".some-class-here", function(){
alert("Alerted! Clicked")
});
Replace .some-class-here with a selector that matches your tagSet elements. Then remove your call to $.each.
I need to have multiple .click() functions populated on page load, based on how many image records are stored within a mysql database.
so far i have a page that will nicely switch between photos with a <ul> of image buttons
but i have to hand write the jquery that deals with it.
is there a way that i can populate a .js file with the correct amount of .click() functions based on the amount of records on in the data base.
In addition to Alex's answer, if you want to set the click event of elements that don't exist yet or haven't been added to the page, you could do:
$(body).on('click','a.record',function(){
//any existing or future a element with class record will have this click function
});
Instead of adding a separate onclick handler to each element, you should use event delegation and attach a single event handler to some container. Said event handles would catch all the onclick events , as the bubble up through DOM.
You don't need to write a click() for each unique element.
Instead, you could select a bunch of elements with a selector, such as $('a.record') and then chain click() to that...
$('a.record').click(function() {
// Any `a` element with a class of `record` was clicked.
});
The disadvantage of doing it this way is you add a bunch of event listeners and it won't be triggered for future elements.
As others have mentioned, event delegation using on() (if using a newer jQuery) or delegate() (if using an older) is the best, as it only attaches one event listener and will work with future elements added after the event is attached.
$(document).on('click', 'a.record', function() {
// Any `a` element with a class of `record` was clicked, now or in the future.
});
I've used document here, but you should use the nearest ancestor which won't change, which may be the ul element you have described.
I've a table generated dynamically by jQuery, using
this.html("<table><tr><td><div>Click Me</div></td></tr></table>");
within the table, I've a few divs (my sample shows only one to keep things simple), which I want to add click event handler to. I'd like to keep html clean and use as much of jQuery power as I can, but since I'm doing an 'eval' type of things I can't quite figure out how to do that.
I know, that I can use $("div[some attribute selector]").on("click", {}, clickHandler);, but is it a good idea in my case?
You need delegated events. To do that, simply use jQuerys on() method like this:
$(document.body).on('click', 'div', function( event ) {
// do something
});
Ref.: .delegate(), .on()
What is that? Almost all events do what we call 'bubble'. That means, if you click on a nested element, your browser looks if there is any click-event handler ascociated on that node. If so, it executes them and then the parent of that element is also asked if there is any click-event handler. This continues until either some handler prevents the event from further bubbling or we have reached the document.documentElement (html).
So, you should change the above document.body into the closest node relative to your dynamically added elements.
You can use either use live or delegate to do that
I have a data web page with possibly few thousands TDs in it. Some of the TD's will need a bound onclick event that uses the contents, or part of the contents of the TD.
I'm using jQuery to add the onclick closure like this:
$(".date").click(function() {
var d = this.html();
doSomething(this, d, otherparams);
}
Is this efficient? It seems that my page would contain few hundreds, or thousands of almost identical closures. Would it be better to put this doSomething call somewhere else.
Infact, this is very inefficient. Even more because you can so easily workaround it using event delegation. Doing that, will use only one event handler method instead of "thousands".
$('table').delegate('td.date', 'click', function( event ) {
var d = $(this).html();
doSomething(this, d, otherparams);
});
You need to call this construct only once (outside of any loop). It'll bind an click event handler to all tables in the above example (you should be more precise using an id for instance). Since most browser events do "bubble" up the DOM tree, any click which happens in a <td> element will finally reach the <table> and is processed there.
Ref.: .delegate()
I'm trying to build a greasemonkey script which will dynamically create tables of data based on user interaction with... other dynamically created tables of data. My problem is that I'm having to make two passes every time I create a table: one to create the table, and another to go grab all of the objects in the table I want to add event handlers to (by id) and add the various event handlers to them.
If I attempt to, say, add an onClick event to a table td before I've created the table and inserted it into the HTML, I get a "component is not available" exception.
This is incredibly cumbersome, because I either have to maintain, separately, a list of the ids and what I should do to those elements when I make my second pass to add the handlers, or develop a naming convention by which I know, based on the id, what I should do with the element.
There HAS to be a better way to do this. I just haven't figured it out yet. Anyone have any ideas?
Firstly, I'd love to know why you need a different ID for every single TD. Is the ID holding important information, such as an index? In this situation it might be better creating each TD within a loop. Also, obviously you can't attach an event handler to a DOM element which doesn't exist! It doesn't have to be injected into the DOM but it DOES have to exist in some capacity.
jQuery's live() isn't a magical mystery, it just uses event delegation, so it attaches the event to a parent element, such as the table and then decides what happens dependent on the target of the click. Here's a rudimentary example. I register a handler to the 'body' element, and then I test each time to see what the target is, if it's a TD element I doSomething() ->
document.body.onclick = function(e) {
var realTarget = e ? e.target : window.event.srcElement;
if ( realTarget.nodeName.toLowerCase() === 'td' ) {
doSomething();
}
};
Event delegation relies on something called event bubbling (or "propogation") which is the way in which modern browsers implement the event model. Each event, when triggered will travel upwards through the DOM until it can go no further. So if you click on an anchor within a paragraph the anchor's 'click' event will fire and THEN the paragraph's 'click' event will fire etc. etc.
jQuery 1.3+ has a new live() function that can set up event handlers for elements that don't exist yet .. check it out
You have to wait for the element to be added to the page, then add the event handler then.
There is no easy way to say "add this to all elements of this type, now and in the future".
It is possible to have a timer periodically check the page for new elements, applying a queue of events (or other properties) to them as they appear, all behind the scenes. This can be abstracted out and re-used, for example Jquery can do that sort of thing.
As JimmyP pointed out, your problem can easily be solved using event bubbling. You might consider writing a wrapper function to work around browser inconsistencies - my own version can be found here and would be used like this:
capture('click', '#element-id', function(event) {
// `this` will be the originating element
// return `false` to prevent default action
});