Question

I’m using this dialog: http://docs.jquery.com/UI/Dialog

To open dialog I do it this way:

$('a.openModal').live("click", function() {
        var idArr = $(this).attr('id').split("OpenNote");
        var id = idArr[1];

        alert($(".modalNote#dialog-modal" + id).html());

        $(".modalNote#dialog-modal" + id).dialog('open');
        return false;
    });

This dialog is used to display content of note when title is clicked. When I generated html on pageload, then this works fine, but if I add html dynamically then dialog won’t open. It is also not hidden when it’s appended to div.

Is it possible to open it “on-fly”?

EDIT 1:

I tried this, but still nothing…

$(document).delegate('a.openModal', 'click', function() {
    var idArr = $(this).attr('id').split("OpenNote");
    var id = idArr[1];

    alert($(".modalNote#dialog-modal" + id).html());

    $(".modalNote#dialog-modal" + id).dialog('open');
    return false;
});

EDIT 2:

Here’s complete, simplified example:

HTML:

<div id="mlist">
    <!-- Modal for Viewing a Saved Note (called by a.modal4) -->
    <div class="modalNote2" id="dialog-modal106" title="Test (10.6.2010)">
        Content...
    </div>
    <!-- End of Modal --> 
</div>

<a href="#" class="openModal2">Add new</a>

JS:

//Global Script for Calling a Fourth Modal with a class of "modal4"
$(".modalNote2").dialog({
    autoOpen: false,
    width: 500,
    height: 375,
    position: ['center', 'center'],
    modal: true
});

$("#mlist").append("<div class=\"modalNote2\" title=\"Test (10.6.2010)\">fghfghfghfghfghsdf</div>");

$(document).delegate('a.openModal2', 'click', function() {

            $(".modalNote2").dialog('open');
            return false;
});

When I click on link, new modal div is added, current one is opened but new one is not, and it is being displayed.

EDIT 3

I followed these instruction and things are much simplified if I do it this way: http://blog.nemikor.com/2009/08/07/creating-dialogs-on-demand/

var $loading = $('<img src="/Content/images/ajax-loader.gif" alt="loading">');

    $('.openModal').each(function() {
        var $dialog = $('<div></div>')
   .append($loading.clone());
        var $link = $(this).one('click', function() {
            $dialog
    .load($link.attr('href'))
    .dialog({
        title: $link.attr('title'),
        width: 500,
        height: 300
    });

            $link.click(function() {
                $dialog.dialog('open');

                return false;
            });            

            return false;
        });
    });

but problem with ajax-generated links still stays.

EDIT 4 – SOLVED!

Finally, I found solution!

var $loading = $('<img src="/Content/images/ajax-loader.gif" alt="loading">');

    $(document).delegate(".openModal", "click", function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .append($loading.clone())
   .load($link.attr('href'))
   .dialog({
       autoOpen: false,
       title: $link.attr('title'),
       width: 500,
       height: 300
   });

        $dialog.dialog('open');

        return false;

    });

Answer 1

This is happening because you’re binding events to objects currently on the page, so when you inject new HTML afterwards these events won’t be bound to it. If you’re using jQuery 1.4 then you can solve this with the .delegate() method like so:

$(document).delegate('a.openModal', 'click', function(){
  // your .live code here
});

This binds an event to the document, which is always there, that searches for instances of your selector. For performance reasons you should replace $(document) with whatever closest static parent will always contain your selector.

If you’re usng an earlier version of jQuery you should look into the livequery plugin. I’d provide a link but I’m answering this from the airport on my phone. 🙂