をクリックします。関数が複数回呼び出されます...なぜですか？

Question

親友。ここにあなたの考えが必要です。このコードには、2つの単純なアクションがあります（ ）。最初のアクションは、クリック後にADDを追加します。 2番目の操作 Xを任意の番号でクリックします。これで2番目のアクションが呼び出されました。コード は一度だけ印刷してください。労働者が読んでいないものは、 の呼び出しを何度も持っています！なぜ誰かが説明できますか？

私は同じコードをとっていました....もう1つのHTMLコードで、3つのDIVで が既に存在しています。コードは正常に動作します。

var count = 1; 
 
$(document).ready(function() { 
 
    $("#add").on("click", function() { 
 
    $("#items").append('<div><input/><button class="btn_x">X' + count + '</button></div></br>'); 
 
    count++; 
 

 
    $(".btn_x").on("click", function() { 
 
     console.log($(this).html()); 
 
    }) 
 
    }) 
 
})

<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<button id="add">Add</button> 
 
<div id="items"></div>

Answer 1

問題は、新しいイベントリスナーにあなたが#addをクリックするたびに追加しているということです。代わりに、親要素のイベントを聴いて子要素から要素を取得することができます。

var count = 1; 
 
$(document).ready(function() { 
 
    $("#add").on("click", function() { 
 
    $("#items").append('<div><input/><button class="btn_x">X' + count + '</button></div></br>'); 
 
    count++; 
 
    }); 
 
    
 
    // Listen to events on the parent element 
 
    $("#items") 
 
    // But only capture events from child elements with .btn_x 
 
    .on("click", ".btn_x", function() { 
 
     console.log($(this).html()); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<button id="add">Add</button> 
 
<div id="items"></div>

あなたはそれをこのように考えることができます。イベントは.btn_xに起こるたびに、それについて#itemsを伝えるために起こっています。 #itemsが聞くたびに、.btn_xを直接聞いているようにイベントを処理できます。

あなたのアプローチの問題は、#addをクリックするたびに「あなたのすべての1人の.btn_xさん！あなたに新しいイベントハンドラがあります！」と言われました。

Answer 2

新しく作成されたアイテムだけにリスナーを追加するのではなく、すべてのbtn_xアイテムに対してリスナーを作成しています。

var count = 1; 
$(document).ready(function() { 
    $("#add").on("click", function() { 
    var buttonClass = ".btn_" + count; 
    $("#items").append('<div><input/><button class="' + buttonClass + '">X' + count + '</button></div></br>'); 
    count++; 

    $(buttonClass).on("click", function() { 
     console.log($(this).html()); 
    }) 
    }) 
}) 

Answer 3

私はあなたが求めているかわからないんだけど、これが役立つことがありますなど、btn_1、btn_2のようなものにクラス名を変更してみてください。

var count = 1; 
 
$(document).ready(function() { 
 
    $("#add").on("click", function() { 
 
    $("#items").empty().append('<div><input/><button class="btn_x">X' + count + '</button></div></br>'); 
 
    count++; 
 
    }) 
 
    $(".btn_x").on("click", function() { 
 
    console.log($(this).html()); 
 
    }) 
 
})

<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<button id="add">Add</button> 
 
<div id="items"></div>

Answer 4

#addまたは#ITEMの場合は二重の呼び出しがあります。あなたのリスナー関数は両方を呼び出します。あなたは1つだけ呼び出すとき。 コードをもう一度チェックする必要があります。私はあなたが私のポイントを持っていればいいと思う