再次使用函数后，带有++的jQuery会相乘

Question

I made a function called test (for example), and it works like this:

function test(){
    var i = 0;

    $('.container').click(function(){
        $(this).append('<div class="element"></div>');
        $('.element').click(function(){
            if (i >= 10){
                $('this').remove();
            } else {
                i++;
            }
        });
    });
};
test();

When I click the class .container , a div appends with the classname .element . When I click this div, var i goes up, until reaching 10. Then the div called .element is removed.

The problem is, is when I click .container again, after .element is removed, the i variable is acting like its clicked twice. After that trice, and so on. How do I counteract this?

Answer 1

You need to attach event to dynamically added elements using .on()

$('.container').click(function(){
        $(this).append('<div class="element"></div>');

    });

 $('body').on('click','.element',function(){
   if (i >= 10){
      $(this).remove();
   } else {
         i++;
   }
});

Also remove .element div event handler inside .container div

Answer 2

Another way is to bind an element like this

You can also use on / bind method to attached an event to dynamic elements.

$(document).on('click','.element',function(){
   if (i >= 10){
      $(this).remove();
   } else {
      i++;
   }
});

OR

$(document).bind('click','.element',function(){
       if (i >= 10){
          $(this).remove();
       } else {
          i++;
       }
    });

Answer 3

You can define the click event for .element like below.

 var i = 0; function test() { $('.container').click(function() { $(this).append('<div class="element"></div>'); }); }; test(); $('body').on('click', '.element', function() { if (i >= 10) { $('this').remove(); } else { i++; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> Click Me! </div>