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>

`.On` is the official replacement for `.Live` – Robert Harvey Jan 07 '13 at 23:15 — Robert Harvey, Jan 07 '13 at 23:15
read the jQuery docs FAQ for answer to `why` – charlietfl Jan 07 '13 at 23:17 — charlietfl, Jan 07 '13 at 23:17
I got it to work with .on(). I had the wrong syntax. – Brandon Orth Jan 07 '13 at 23:33 — Brandon Orth, Jan 07 '13 at 23:33

score 21 · Accepted Answer · answered Jan 07 '13 at 23:43

21

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

answered Jan 07 '13 at 23:43

Dhofca

376
1
10

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. – Asif Ashraf Aug 26 '13 at 08:24
1

But how do you target that .openpopup that was clicked? – Z2VvZ3Vp Nov 01 '13 at 02:37
`e.target` within the click handler - [jQuery event.target doc](https://api.jquery.com/event.target/) – Jake Berger May 16 '14 at 19:53

score 2 · Answer 2 · answered Jan 07 '13 at 23:20

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/

answered Jan 07 '13 at 23:20

Musa

96,336
17
118
137

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(). – Brandon Orth Jan 07 '13 at 23:32
@BrandonOrth do you want me to re-write the entire code for you?, just change the second bind to `on()` – Musa Jan 07 '13 at 23:35
I modified your example to add .on() to the .EditIcon click. Works. Thank you. – Brandon Orth Jan 07 '13 at 23:37
I do have it working now. Dhofca made the corrections below. Thank you Musa. – Brandon Orth Jan 07 '13 at 23:49

score 0 · Answer 3 · answered Sep 06 '13 at 21:07

Following @Dhofca this really worked. I am just showing an example which I tried with 'this' keyword.

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

Alternative to jquery live that can work

3 Answers3

Linked