Question

I have a script that attaches actions to some objects in my HTML code. Say, a textarea with a class of with-counter that updates the number of characters being typed on it; a list that listens when a mouseover happens; a link that is being ajaxified; and so on.

e.g.:

$("textarea.with-counter").keydown(function(){
   var text_len = $(this).val().length;
   //manipulate the span/etc that has the counter
});
$("a.ajax_link").click(function(){
   var loc = $(this).attr("href");
   //load the value of href via $.ajax to some div
   //yadda yadda
});

The initial scenario is this: A relatively small amount of HTML is loaded from the database and then actions are being attached to it (implementing the code snippet above). Now, I have this script that loads another chunk of same format HTML. The newly loaded HTML should receive the same actions.

The bottom line of the problem is: I don’t want to attach these actions to the objects/elements that I have attached these actions before. As newer chunk of HTMLs are loaded, the slower this attaching of actions happen. The actions are being attached to the previously loaded HTML (remember that they have these actions) when what I want to happen is that the actions must be attached only to the newly loaded HTML chunks. There are times that FF freezes and will ask if I want to continue the script process.

Ergo, the question: Is there a way where I can opt to bypass attaching of actions to the elements that I have attached actions before?

*A million thanks, everyone.

Answer 1

Simply use live events, e.g. $(...).live('eventname', function() { ... })

They are not attached to the elements itself but the document so thanks to event bubbling they work for all matching events including those that didn’t exist at the time of the .live() call.