jquery ui dialog - жить не работает?

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 на pageload, тогда это работает отлично, но если я буду добавлять html динамически, то диалог не откроется. Он также не скрывается, когда он добавляется в div.

Можно ли открыть его «на лету»?

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

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

Когда я нажимаю на ссылку, добавляется новый модальный ДИВ, ток один открыт, но новый не является, и она отображается.

EDIT 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 генерируемые ссылки все еще остается.

EDIT 4 - SOLVED!

И наконец, я нашел решение!

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. Я бы предоставил ссылку, но я отвечаю на это из аэропорта по телефону. :)