Alternative to jquery live that can work

Question

I have this simple code. http://jsfiddle.net/borth/BmEZv/ If you click on the link once, it works fine. If you click on it a second time, it doesn't work. Due to the html being loaded into html after the DOM has loaded, I've tried .on, .bind, .delegate, and .live. No of them work except for .live which is being deprecated (I'm using jquery 1.7.2).

Can someone explain why .live is the only function that works and why the others don't work (or if I am doing something wrong with the 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>

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

Solution 2

.on() can be used with or without delegation, below is an example of on() using delegation.

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

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

Comments

[Brandon Orth]

This doesn't work. It works on the first click as expected, but on the second click, it only registers the first alert using .on(). $(".EditIcon").bind('click', function(){ does not get fired. I also tried it with .delegate().

[Musa]

@BrandonOrth do you want me to re-write the entire code for you?, just change the second bind to on()

[Brandon Orth]

I modified your example to add .on() to the .EditIcon click. Works. Thank you.

[Brandon Orth]

I do have it working now. Dhofca made the corrections below. Thank you Musa.

[Asif Ashraf]

wow Never thought of this way. I am still looking for some alternate way of .live in latest jquery build. Is there any official statement? Thanks for snippet I will test this one.

[Z2VvZ3Vp]

But how do you target that .openpopup that was clicked?

[Jake Berger]

e.target within the click handler - jQuery event.target doc