CODEWITHSUNDEEP
javascriptjqueryajax
Wurlitzer
Wurlitzer

Reputation: 2919

Dynamic content doesn't work when loaded with ajax

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!

Upvotes: 3

Views: 700

Answers (2)

user312650
user312650

Reputation:

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

Upvotes: 2

karim79
karim79

Reputation: 342625

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();
    }
});

Upvotes: 1

Related Questions