Alternative zu jquery leben, die funktionieren kann

Question

Ich habe diesen einfachen Code. http://jsfiddle.net/borth/BmEZv/ Wenn Sie einmal auf den Link klicken, funktioniert es gut. Wenn Sie es ein zweites Mal anklicken, funktioniert es nicht. Da der HTML-Code nach dem Laden des DOM in HTML geladen wird, habe ich .on, .bind, .delegate und .live ausprobiert. Keine von ihnen funktioniert außer .live, die veraltet ist (ich benutze jquery 1.7.2).

Kann jemand erklären, warum .live ist die einzige Funktion, die funktioniert und warum die anderen nicht funktionieren (oder wenn ich etwas falsch mit den anderen Funktionen mache).

---

$(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()with or without delegation können verwendet werden, ist unten ein Beispiel für ein() Delegation verwenden.

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

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

Answer 3

@Dhofca Danach wirklich funktioniert. Ich zeige nur ein Beispiel, das ich mit 'diesem' Schlüsselwort versucht habe.

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