Jump to content

Function stops working after div reload (DOM?)


slj90
Go to solution Solved by WinstonLA,

Recommended Posts

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,

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)
});
});
Link to comment
Share on other sites

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!');
});
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.