$(".box a").live("click" how to modify it

Question

hi guys need little bit help..

i know .live is no more working in jQuery v1.9 is there any alternative that my below function get back working i try .on() and .bind() but did not succeed. here is fiddle

HTML

<div id="container">
    <p>There are 0 boxes</p>
    <a href="#" class="more">Add more +</a>
</div>

jQuery

$(".more").click(function() {
    $("#container").append("<div class='box'><a href='#'>x</a></div>");
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
    if(count>2){
        $(".more").hide();
    }

});

$(".box a").live("click", function() {
    $(this).parent().remove();
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
     if(count<3)
    {$(".more").show();}
});

See http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht/8752376#8752376 and http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht/8752376#8752376 for how you can use the proper form of `.on()` to replace `.live()`. — jfriend00, Nov 13 '13 at 06:43

score 2 · Answer 1 · answered Nov 13 '13 at 06:37

Use delegation of events for elements which are added dynamically:

http://jsfiddle.net/89wTX/11/

$(".more").on('click', function() {
    $("#container").append("<div class='box'><a href='#'>x</a></div>");
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
    if(count>2){
        $(".more").hide();
    }

});

$("#container").on("click", '.box a', function() {
    $(this).parent().remove();
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
     if(count<3)
    {$(".more").show();}
});

When you just use on without delegation it attaches listeners once to existing elements. When you add new elements(boxes in your case) they have no listeners attached.

score 1 · Answer 2 · answered Nov 13 '13 at 06:39

TRy this http://jsfiddle.net/devmgs/89wTX/9/

$(document).on("click",".box a", function() {
    console.log("removeing");
    $(this).parent().remove();
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
     if(count<3)
    {$(".more").show();}
});

Mehmet Ince · Accepted Answer · 2013-11-13T07:15:54.597

1

Your script code should be this;

$(".more").click(function() {
  $("#container").append("<div class='box'><a href='#'>x</a></div>");
  var count = $(".box").length;
  $("p").text("There are " + count + " boxes.");
    if(count>2)
     {
       $(".more").hide();
     }

  $(".box a").click(function() {
  $(this).parent().remove();
  var count = $(".box").length;
  $("p").text("There are " + count + " boxes.");
    if(count<3)
     {
      $(".more").show();
     }
  });   
});

here is fiddle

edited Nov 13 '13 at 07:15

answered Nov 13 '13 at 06:40

Mehmet Ince

4,059
12
45
65

Every time you add new box ($('.more').click), you add event listener to all boxes. So after adding 3 boxes in a row you have: 3 click listeners for 1st box, 2 for 2nd and 1 for 3rd. It means you run on click function ($(".box a").click) many times where it should be run once. It's not optimal solution. – f1ames Nov 13 '13 at 07:13
Open your console, add 3 boxes and then remove first. How many console logs did you get (you should get one)? http://jsfiddle.net/89wTX/16/ – f1ames Nov 13 '13 at 10:32

score 0 · Answer 4 · answered Nov 13 '13 at 06:34

0

Use on :

$(".box").on("click","a", function() {...})

answered Nov 13 '13 at 06:34

Ankit Tyagi

2,381
10
19

score 0 · Answer 5 · answered Nov 13 '13 at 06:35

0

$(".box").on("click","a", function() {
   ....
});

reference on

answered Nov 13 '13 at 06:35

Rituraj ratan

10,260
8
34
55

$(".box a").live("click" how to modify it

5 Answers5