Question

I have a div that is dynamically created on the server and returned to the page via ajax using Jquery:

$.ajax({
                        url: pathSite,
                        type: 'GET',
                        success: function (view) {

                            //add view content
                            $('#pageContent').html(view);

                        },
                        async: true
                    });

Now the problem is that inside that HTML returned by the ajax function is a div that is supposed to be an accordion (JQuery UI), so I need to use late binding for the UI build method, something like this:

$(document).ready(function () {
$('#accordionForm').live("ready", function () {
    $('#accordionForm').accordion();
});
});

But I know that “ready” is not a valid event for live method, so please tell me if there is another workaround for this behaviour?

Thanks

Answer 1

Simply add it to your success function, this will ensure it runs after the ajax calls has completed.

success: function (view) {
                            //add view content 
                           $('#pageContent').html(view);

                            //convert to accordian
                            $('#accordionForm').accordion();
                        },