How to kill jQuery before filling html returned from ajax call?

Question

I'm using an ajax function that builds fill the innerHTML of a span and then build the jquery function. The first time I call the jquery function it works fine, yet if I called the ajax function again the jquery click function is being called twice, and if i call it once more the jquery get called 3 times and so on. This the jquery method I'm using:

$(".delete_mail").live('click', function() {
                                     $(this).delete_mail();
                                    });

I tried the .die before filling the innerHTML yet it did not help. I want to remove the jquery live method before filling the innerHTML so it wont be duplicated.

Please help.

Answer 1

The .live() function binds an handler to an event for all current and future matched elements.

So, in general, you should call .live() only once, otherwise it will keep adding new handlers.

Try moving your .live() call to the onload event and call it only once, the handler will automatically bind to the new elements added via the Ajax call.