Dynamic jQuery dialog after data append w/o reloading page. Possible?

Question

Howdy,

So I have a page with an enormous table in a CRUD interface of sorts. Each link within a span calls a jQuery UI Dialog Form which fetches it's content from another page. When the action taking place (in this case, a creation) has completed, it appends the resulting new data to the table and forces a resort of the table. This all happens within the JS and the DOM.

The problem with this, is that the new table row's CRUD links don't actually trigger the dialog form creation as all the original links in spans are only scanned on document.ready and since I'm not reloading the page, the new links cannot be seen.

Code is as follows:

$(document).ready(function() {
    var $loading = $('<img src="/images/loading.gif" alt="Loading">');
    $('span a').each(function() {
        var $dialog = $('<div></div>')
            .append($loading.clone());

        var $link = $(this).one('click', function() {
            // Dialog Stuff
            success: function(data) {
                $('#studies tbody').append(
                    '<tr>' +
                        '<td><span><a href="./?action=update&study=' + data.study_id + '" title="Update Study">Update</a></span></td>' +
                    '</tr>'
                );
                fdTableSort.init(#studies); // This re-sorts the table.
                $(this).dialog('close');
            }
            $link.click(function() {
                $dialog.dialog('open');
                return false;
            });

            return false;
        });
    });
});

Basically, my question is if there is any way in which to trigger a jQuery re-evaluation of the pages links without forcing me to do a browser page refresh?

Answer 1

If I understand correctly, I think you can change the code slightly to make it work for you:

$(document).ready(function() {
  var $loading = $('<img src="/images/loading.gif" alt="Loading">');
  $('span a').click(function() { //changed here
    var $dialog = $('<div></div>')
        .append($loading.clone());

    //rest of your code  
}

}

So in this way, your dialog is totally dynamically created and appended to your DOM on the click event of the span a elements.

The other point to your question is if the dialog is a floating div (which is likely), a page refresh would likely result in the dialog not showing up after the page is served. So you don't want and can't afford a page refresh.

Answer 2

Try to bind the newly created link trough jquery live function.