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插件。我會提供一個鏈接，但我正在通過手機從機場接聽。 :)