Function stops working after div reload (DOM?)

[slj90]

I am creating a 'stream' page with like buttons under each status. It works untill the div is reloaded with new content. I have researched this and it appears to be due to the new content not being loaded into the DOM.

Does anyone know a solution? I have found a few strange ones, for example, forcing a window resize. I tried that but it didn't work.

 

Thanks,

[CroNiX]

This answer assumes you are using javascript/ajax to retrieve data and display it.

 

Let's say you assign a click event to an anchor. Clicking on the anchor sends an ajax request to the server and then display some HTML that was retrieved. That new HTML is now IN THE DOM (or you wouldn't see it). However, the javascript click event that was assigned BEFORE the new HTML was retrieved knows nothing about that new HTML since it wasn't present when the page was loaded  and the js originally assigned, therefore the HTML couldn't have been assigned any js function. So the js has to be reapplied to the new elements so it can bind the events to them. Hope that makes some sense.

[slj90]

Yes it makes more sense now thank you.

Well here is the function when you press the like button/span

$('.likestatusclass').click(function(x){
  var lb = $(this).attr('id');

$.post('../action/likestatus.php',{statusid:lb},function(l){

alert(l)
alert(lb)
 });
});

And here is part of the function that reloads the div when there is a new status

$('div#stream').delay( 500 ).load(location.href + " #stream");

What do I need to change?

Thanks

[CroNiX]

It looks like in the onComplete event of this:

$('div#stream').delay( 500 ).load(location.href + " #stream");

You'd have to retrigger all of this so that the onClick event gets assigned to the new DOM elements you are adding:

$('.likestatusclass').click(function(x){
var lb = $(this).attr('id');

$.post('../action/likestatus.php',{statusid:lb},function(l){

alert(l)
alert(lb)
});
});

[slj90]

 

You'd have to retrigger all of this so that the onClick event gets assigned to the new DOM elements you are adding:

How would I retrigger it?

 

Thank you very much.

[CroNiX]

By having the onclick code executed again when after the new dom elements are retrieved. It would be best to turn that into a function so you don't have to repeat the same code 2x.

[WinstonLA]

Instead 

$('.likestatusclass').click(function(x){

use

$('body').on('click', '.likestatusclass', function(x){

This should solve the problem.

Edited December 10, 2014 by WinstonLA

[kicken]

As show previously, the correct way to handle this is to use delegation as provided by .on(). Basically you attach the click event to some parent element which will never be removed and then have it filter events based on a selector.

 

So given this code:

$('body').on('click', '.likestatusclass', function(e){
   ...
});

Every time some clicks on an element which is or is a child of the body element (which is everything basically) jQuery will catch that event. It then will check if the actual element clicked matches the .likestatusclass selector. If it does, it will execute your callback function. If it does not, the event is ignored. So what this means is you can add/remove as many elements as you want with the .likestatusclass and clicking them will still work because the click event handler is actually bound to the body element, not each individual element.

 

Doing this has other benefits as well such as using less memory as you only have one click handler rather than one for each separate .likestatusclass element. In order to avoid catching unnecessary events, you should bind the handler to the closest parent that does not change, rather than just using the body or document elements all the time.

 

So:

$('#statusContainer').on('click', '.likestatusclass', function(e){
  alert('You clicked like!');
});