Hello I am having a problem with .html function in jquery. event listener doesn't work anymore everytime i remove the script from the codes and paste it again. can you help me how to reactive script after it's re-paste in html.
-
In particular, "doesn't work anymore" isn't very descriptive. Describe exactly what you expect to happen and what actually happens, including any error messages. When asking about code, include a minimal sample. For webpages, include a link to a live page; on the other hand, it's best on SO for questions to be self-contained. Jon Skeet has posted other guidelines on asking the perfect question. Also check out the SO FAQs and lurk a little.outis– outis2011-04-19 08:50:22 +00:00Commented Apr 19, 2011 at 8:50
-
thanks for that comment dude. I'll change my question for better.user692121– user6921212011-04-22 06:51:34 +00:00Commented Apr 22, 2011 at 6:51
Add a comment
|
4 Answers
You can set your events using .live() method. Like:
$("#submit_button").live("click",function(e){
});
This way if you are adding/removing html from your page using .html() method, the events will remain intact.
Hope that helps.
Comments
You could use the .live() method to register the event handler which will preserve it even if the corresponding DOM element is recreated. Example:
$(function() {
$('#someid').live('click', function() {
//
});
});
Comments
I guess you are changing the inner html of some container with .html() function of jquery and the events you assigned are lost after the process. There are two approaches you can take:
If the content doesn't change use the .detach() function to remove and insert your elements back. The .detach() function preserves and event handlers attached to the elements you detach. However if you are inserting a different content then use .live() event to assign your events. The events that are assigned with .live() will be recreated when a element with the same selector is inserted into the dom.
5 Comments
Thanks for that great answer dude. Yes the situation is I change the content (.html()) of some container and then when it's pasted back (.html()) event handlers are already lost. I tried to use .detach function and put it in a variable but it cannot be pasted back using .html() How can I put .detach object into a javascript variable?
omerkirk
The difference between the .html() and other dom manipulation methods of jquery is that .html() function converts string into dom. So it cannot preserve any of the events. You can use the .append() function to insert the elements back to the dom.
omerkirk
You can use the append function like this. Hope it helps. var elements = $("your selectors").detach(); $("your elements parent tag selector").append(elements);
Hello dude I already fixed the problem. I misunderstood the difference between .detach and .html. what I did with .html is this. var a = $(container).html();$(container).empty(); $(container).html(a); while in .detach it won't because using .detach it will remove the element instead of getting its content. I solve the problem by this - var a $(container).contents().detach(); $(container).html(a); by the way thanks for your help dude.
Use this as an example:
$('a.button').live('click', function(){
//anchor tag clicked.
alert('Button has been clicked');
});
The .live():
Attach a handler to the event for all elements which match the current selector, now and in the future.
The .live() method is able to affect elements that have not yet been added to the DOM through the use of event delegation.
This means that you add and remove html from your page with .html() and your events will still perform.
See the jQuery website for more information on .live()
A quick jsFiddle example.
