jQueryの機能を使用した後++乗算と加算し、再度

Question

私は（例えば）テストと呼ばれる関数を作り、それは次のように機能します。

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(); 

私はクラス.containerをクリックすると、div要素は、クラス名と追加します.element。このdivをクリックすると、var iが10に達するまで上がります。.elementという名前のdivが削除されます。

が削除された後、.containerを再度クリックすると、i変数がクリックされた2回のように動作しています。その三位一体の後、など。どうすればこれに対処できますか？

Answer 1

あなたはもう一つの方法は、この

のような要素をバインドすることです.on()

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

    }); 

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

を使用して動的に追加要素がまた.container divの

Answer 2

内.element divのイベントハンドラを削除するには、イベントを添付する必要がありますon/bindメソッドを使用して、動的要素にイベントをアタッチすることもできます。

$(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

あなたは以下のような.elementためclickイベントを定義することができます。 $の代わりに$（ '要素'）（ '要素を'）を示す

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>