jquery ui dialogue - ne fonctionne pas en direct?

Question

J'utilise cette boîte de dialogue: http://docs.jquery.com/UI/Dialog

Pour ouvrir le dialogue, je le fais de cette façon:

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

Cette boîte de dialogue permet d'afficher le contenu de la note lorsque le titre est cliqué. Quand j'ai généré html sur pageload, cela fonctionne très bien, mais si j'ajoute html dynamiquement, la boîte de dialogue ne s'ouvre pas. Il n'est également pas caché lorsqu'il est ajouté à div.

Est-il possible de l'ouvrir "à la volée"?

EDIT 1:

J'ai essayé, mais toujours rien ...

$(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:

est ici exemple complet, simplifié:

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

Lorsque je clique sur le lien, le nouveau div modal est ajouté, un courant est ouvert, mais nouveau n'est pas, et il est affiché.

EDIT 3

J'ai suivi ces instructions et les choses sont beaucoup simplifiées si je le fais de cette façon: 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; 
     }); 
    }); 

mais le problème avec des liens ajax-généré reste encore.

EDIT 4 - RESOLU!

Enfin, j'ai trouvé la solution!

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

Ce qui se passe parce que vous êtes des événements de liaison aux objets actuellement sur la page, lorsque vous injectez nouveau HTML après ces événements ne seront pas liés à elle. Si vous utilisez jQuery 1.4, vous pouvez résoudre cela avec la méthode comme si .delegate():

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

Cela lie un événement au document, qui est toujours là, qui recherche les instances de votre sélecteur. Pour des raisons de performances, vous devez remplacer $ (document) par le parent statique le plus proche qui contiendra toujours votre sélecteur.

Si vous utilisez une version antérieure de jQuery, vous devriez regarder dans le plugin livequery. Je fournirais un lien, mais je réponds de l'aéroport sur mon téléphone. :)