Excellent question! I’ve updated the post to show an example of adding and removing items.

Is there a generic way of doing this ?

For example I have few areas on the page that bring html via various mechanisms from a remote location - mainly AJAX. I have no idea how the data would look but it may have accordions, tabs, modal boxes(thickbox) - how do I rebind those ?

Calling the document.ready wouldn’t do it because the areas that don’t refresh are going to bind again creating a nightmare. Ideally would be nice to rebind only the newly refreshed element(divs)

Is there a way to achieve this ?

Thank you for the quick response. I did understand “Unbind, then Rebind” would fix the problem of producing a multiplier effect, but my question was that I do know understand the behavior of producing a multiplier effect, (e.g. why in some circumstance, when you click the last button of ‘I am new’, it produces 3 new buttons instead of one?)
Please see the example at http://www.61dh.com/qna/binding.html, you may know what I was talking about. Sorry for the confusion!

Thanks again!

You need to keep reading this entry all the way through the end, or at least through the section called “Unbind, then Rebind” . It looks like the code you copied comes from the example halfway through the entry.

I would appreciate it if someone can help me out. (adamcai@live.com)

Happy Thanksgiving!

I have a situation where I’ll be adding several divs that I want to have a certain behavior. Rather than go through re-binding them, I was thinking of creating a hidden div that has all the behavior bound to it, and then when I need to “add” the div, I’ll just use clone(true) on the hidden div and change the id and remove my “hidden” class. This way I don’t have to spend much time worrying about rebinding. Does this approach have merit, or is there a drawback that I’m not considering?

Regarding Bind/unbind this article bring me more confusion than what it solves.

Why do you use Append methods (addItemFinal, .append, etc,etc) when you can explain it more generally with, after you load your external data, just type the bind method again, period!

Example :

function actualizarLinks()
{
   $.get("index.php", { page: "links" , returnType: "html", ajax:"1" }, function(data){
					 $("#links").html(data);
					 $('#refreshLinks').bind('click', actualizarLinks);
				}
	 ); 							

}
$('#refreshLinks').bind('click', actualizarLinks);

Explained:

The last line simply binds the click button of #refreshLinks to the function actualizarLinks for the function to called.

Inside the function, we call request the page with ajax, and update our #links with the data returned, then, we just rebind (bind again), the click method of #refreshLinks to the actualizarLinks function.

Hope this clears any future confusion, like the one i had.

function addItemFinal() {
	var $newLi = $(' <li class="special" >special and new  <button >I am new </button > </li >');
	$(this).parent().after($newLi);
	$('#list8 li.special button')
	  .unbind('click', addItemFinal)
	  .bind('click', addItemFinal);
}
$(document).ready(function() {
$('#list8 li.special button').bind('click', addItemFinal);
  // non-rebinding click handler
  $('#list8 li.special button').click(function() {
	$(this).after(' pressed');
  });
});

Ok Here is my question.
if there is a list like in the document.
$(’#list8 li.special button’).bind(’click’, addItemFinal);
and after that there is another list with the same name and both loaded at the same time. It apply the effect on first one. but does not work on the second one Why. I resolved it like this
$(’#list8 li.special button’).bind(’click’, addItemFinal);
$(’#list9 li.special button’).bind(’click’, addItemFinal);

while it should work like this.
$(’#list8 li.special button’).bind(’click’, addItemFinal);

As it is said that Effect is applied to all the DOM elements as with the same reference.
I tested other sort of things with the same concept like changing colors etc those thing works fine (not in this example).