Alternativa a jquery live che può funzionare

Question

Ho questo semplice codice. http://jsfiddle.net/borth/BmEZv/ Se si fa clic sul collegamento una volta, funziona correttamente. Se fai clic su di esso una seconda volta, non funziona. A causa del caricamento del codice HTML in html dopo il caricamento del DOM, ho provato. On, .bind, .delegate e .live. Nessuno di loro funziona eccetto per .live che viene deprecato (sto usando jquery 1.7.2).

Qualcuno può spiegare perché .live è l'unica funzione che funziona e perché gli altri non funzionano (o se sto facendo qualcosa di sbagliato con le altre funzioni).

---

$(document).ready(function(){ 
    $(".OpenPopup").bind('click', function(e){ 
     alert('test .OpenPopup'); 
     // do something 
     return false; 
    }); 
    $(".EditIcon").bind('click', function(){ 
     alert('test .EditIcon'); 
     // do something 
     $("#ABC").html('<div class="EditIcon OpenPopup" pwidth="800" pheight="500" ptitle="EditText">click here again</div>'); 
    }); 
}); 


<div id="ABC"><div class="EditIcon OpenPopup" pwidth="800" pheight="500" ptitle="EditText">click here</div></div> 

Answer 1

$(document).ready(function(){ 
     $(document.body).on('click', ".OpenPopup", function(e){ 
      alert('test .OpenPopup'); 
      // do something 
      return false; 
     }); 
     $(document.body).on('click', ".EditIcon", function(){ 
      alert('test .EditIcon'); 
      // do something 
      $("#ABC").html('<div class="EditIcon OpenPopup" pwidth="800" pheight="500" ptitle="Edit Text">click here again</div>'); 
     }); 
    }); 

Answer 2

.on() può essere utilizzato with or without delegation, sotto è un esempio di on() mediante la delega.

$("#ABC").on('click', ".OpenPopup", function(e){ 

http://jsfiddle.net/BmEZv/1/

Answer 3

seguito @Dhofca davvero funzionato. Sto solo mostrando un esempio che ho provato con la parola chiave 'this'.

$(document.body).on('click', ".query-result table tr", function() { 
    var el = $(this); 
    el.closest('table').find('tr').removeClass('dotted'); 
    el.addClass('dotted'); 
});