clickイベントリスナーがあるあなたがあなたのリストに要素を追加するたびに、あなたの削除ボタン
に追加され、プログラムに問題あなたは問題を理解しますので、私はより深くどのようにあなたのコードの作業について説明します:
まず、これは我々が一例として、それに取り組むのページです:
また私たちのJavaScriptコード:
var i = 0;
$(document).ready(function(){
$(".additem").on("click", function(){
var val = $("input").val();
if(val!=="") {
var elem = $("<li></li>").text(val);
$(".list-item").append(elem);
$("input").val("");
$(".removeitem").on("click", function() {
i++;
console.log("Call Remove Event " + i);
$(".list-item li:last-child").remove();
});
}
});
});
最初の呼び出し:あなたはあなたのリストにitem10
を追加するとき、あなたはitem10
を削除]をクリックしたときにイベントリスナーがあなたの削除]ボタンを1回追加されますクリックすると削除だけでコンソール出力も、リストから
を削除します:Call Remove Event 1
第二コール:あなたもitem10
あなたのリストへの追加時に、イベントリスナーをクリックして削除ボタンを削除して、あなたがクリックしたときにを削除するために2回追加されますとitem9
は、リストから削除されます
コンソール出力:
Call Remove Event 2
Call Remove Event 3
その理由は、あなたのリストの最後の要素は、2回直接削除されます削除ボタンをクリックしたとき、それはだです削除ボタンを2回クリックしているようです。
サードコール:あなたはあなたのリストにitem9
を追加するときに、イベントリスナーをクリックして削除ボタンを削除し、item9
、item8
とitem7
を削除クリックしたときにして3回追加されます
コンソール出力リストから削除されます:
Call Remove Event 4
Call Remove Event 5
Call Remove Event 6
もしCこの問題を解決するために、このメソッドは、実行されてからremoveitem
要素上の任意の追加のハンドラを続ける
$(document).ready(function(){
$(".additem").on("click", function(){
var val = $("input").val();
if(val!=="") {
var elem = $("<li></li>").text(val);
$(".list-item").append(elem);
$("input").val("");
$(".removeitem").on("click", function(e) {
e.stopImmediatePropagation();
$(".list-item li:last-child").remove();
});
}
});
});
:どちらかevent.stopImmediatePropagation()を使用して、この方法を試してみてください。
それとも単にあなたがクリック機能にadditem
の範囲外でクリック機能にremoveitem
を置くことができ、それが正常に動作します:
$(document).ready(function(){
$(".additem").on("click", function(){
var val = $("input").val();
if(val!=="") {
var elem = $("<li></li>").text(val);
$(".list-item").append(elem);
$("input").val("");
}
});
$(".removeitem").on("click", function() {
$(".list-item li:last-child").remove();
});
});
あなたは、クリックイベントをネストされています。 '.additem'をクリックするたびに、新しい' .removeitem'クリックイベントが追加されます。これらのイベントをネストしないでください –
実行可能なサンプルコードを追加してください。そうすれば、作業コードを表示するのが簡単になります。 – olahell
ありがとうございます!今私は気が気になりません:) – StefanC