JavaScript functions disappear when I update content with jQuery

Question

Hello!

Please help me, I have tried to find an explanation to this problem for half of my working day.

When I update div-tag with new content by using jquery the JavaScript functionality disappears in the updated content? How do I resolve this in the simplest way?

function liveFeed(){
    var country = $('#country').val();
    //var time = new Date().getTime()
    $('.post').load('/includes/public/livefeed.php?country=' + country);        
    }
window.setInterval(liveFeed, 10000);

Answer 1

It depends on what your "Javascript functionality" is. Generally, it disappears for a perfectly good reason: the DOM elements themselves are thrown out and replaced by new ones.

For event handling, you can use the jQuery .delegate() or .live() methods to bind your event handlers. For other stuff (like datepickers or dialogs) you have to re-run the code that sets them up.

Answer 2

Without seeing everything, I would guess that you simply need to rebind the Javascript function after loading the new content.