jquery ui对话框 - 活不工作？

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时也不会隐藏。

是否可以在“on-fly”中打开它？

编辑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添加，当前一个被打开，但新的不和正在显示它。

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

发生这种情况，因为你将事件绑定到当前对象在页面上，所以当你算账注入新的HTML这些事件将不会被绑定到它。如果你正在使用jQuery 1.4，那么你可以像这样与.delegate（）方法解决这个问题：

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

此结合事件的文件，这是永远存在的，即搜索您选择的实例。出于性能方面的原因，您应该使用最接近的静态父项将始终包含您的选择器来替换$（document）。

如果你正在使用jQuery的早期版本，你应该查看一下livequery插件。我会提供一个链接，但我正在通过手机从机场接听。 :)