Jquery live alternative that might work

Question

I have this simple code. http://jsfiddle.net/borth/BmEZv/ If you click on a link once, it works fine. If you click on it a second time, it will not work. Due to the fact that html loads in html after loading the DOM, I tried .on, .bind, .delegate and .live. None of them work, except for .live, which is deprecated (I am using jquery 1.7.2).

Can someone explain why .live is the only function that works and why others do not work (or if I am doing something wrong with other functions).

---

$(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() can be used with or without delegation , the following is an example of on () using delegation.

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

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

Answer 3

Following @Dhofca, it really worked. I am just showing an example that I tried with the keyword 'this'.

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