Dynamic content doesn't work when loaded with ajax

Question

I'm trying to load some dynamic content after the user has logged in, using $.ajax, like so:

$.ajax({
    url: "functions.php",
    type: "GET",
    data: login_info,
    datatype: 'html',
    async: false,
    success: function (response) {
        $('#main').html(response);
    }
});

The problem is, that some events don't work, when loaded this way. I fixed the buttons with the .live() method, but a sortable list for example, doesn't work. How can I somehow refresh the DOM, and let jquery know of these new added elements?

Thanks!

Answer 1

You would need to reinitialize UI components in $.ajax's success callback, e.g.:

$.ajax({
    url: "functions.php",
    type: "GET",
    data: login_info,
    datatype: 'html',
    async: false,
    success: function (response) {
        $('#main').html(response);
        $("#main .sortable").sortable();
    }
});

Answer 2

There is no simple answer. I have just been coding a jQuery script and faced the same problem.

Just use this, i.e. the "Rebinding" solution