Alternatywa dla jquery live, która może pracować

Question

Mam ten prosty kod. http://jsfiddle.net/borth/BmEZv/ Jeśli klikniesz link raz, działa poprawnie. Jeśli klikniesz go po raz drugi, to nie zadziała. Z powodu załadowania html do html po załadowaniu DOM, próbowałem .on, .bind, .delegate i .live. Żadna z nich nie działa z wyjątkiem .live, które jest przestarzałe (używam jquery 1.7.2).

Czy ktoś może wyjaśnić, dlaczego .live jest jedyną funkcją, która działa i dlaczego inne nie działają (lub jeśli robię coś nie tak z innymi funkcjami).

---

$(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() można stosować with or without delegation poniżej jest przykładem na() za pomocą przekazania.

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

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

Answer 3

Po @Dhofca to naprawdę działa. Po prostu pokazuję przykład, który próbowałem z słowem kluczowym "this".

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