jquery ui 对话框 - live 不工作？

Question

我正在使用此对话框:http://docs.jquery.com/UI/Dialog

要打开对话框，我这样做:

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

此对话框用于在单击标题时显示注释内容。当我在页面加载时生成 html 时，这工作正常，但如果我动态添加 html，则对话框将无法打开。当它附加到 div 时也不会隐藏。

是否可以“即时”打开它？

编辑1:

我试过了，但还是没有结果...

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

编辑2:

这是完整、简化的示例:

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

当我点击链接时，会添加新的模态 div，打开当前模态 div，但不会打开新模态 div，并且正在显示它。

编辑3

我遵循了这些说明，如果我这样做，事情会变得更加简单: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;
        });
    });

但是 ajax 生成的链接问题仍然存在。

编辑 4 - 已解决!

终于找到解决办法了!

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

发生这种情况是因为您将事件绑定(bind)到页面上当前的对象，因此当您随后注入(inject)新的 HTML 时，这些事件将不会绑定(bind)到它。如果您使用的是 jQuery 1.4，那么您可以使用 .delegate() 方法解决此问题，如下所示:

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

这会将事件绑定(bind)到文档，该文档始终存在，用于搜索选择器的实例。出于性能原因，您应该将 $(document) 替换为任何最接近的静态父级，该父级将始终包含您的选择器。

如果您使用的是早期版本的 jQuery，您应该查看 livequery 插件。我会提供一个链接，但我是在机场用手机回答这个问题的。 :)