jquery ui 对话框 - 现场不工作? [英] jquery ui dialog - live not working?

问题描述

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

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

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

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"?

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

编辑 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，打开当前的但没有打开新的，并且正在显示.

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

编辑 3

我遵循了这些说明，如果我这样做，事情就会大大简化:http://blog.nemikor.com/2009/08/07/creating-dialogs-on-demand/

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

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

but problem with ajax-generated links still stays.

编辑 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;

    });

推荐答案

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

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

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

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.

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

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. :)

这篇关于jquery ui 对话框 - 现场不工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！