jquery - 内部の JQuery クリック イベント

Question

私に何が起こっているのか本当にわかりません..

コードは次のようになります。

for (var j=0; j<tours.length; j++){
    var name = tours[j].name;

    var $tourLI = $('<li id="'+name+'"></li>');
    var $tourButton = $('<div class="button-inside"><span>'+name+'</span><span></span></div>');

    $tourButton.click(function() {
        alert(name);
    }
}

ツアー名を表示する各ボタンのクリックイベントをバインドしようとしていますが、クリックしているボタンに関係なく、常に最後のツアー名が表示されます。

私は何を間違っていますか？

ありがとう！

Answer 1

nameforループが進む前に、変数の値を「クローズオーバー」するために、クリックハンドラーをクロージャーでラップする必要があります。

これは、クリックするまでハンドラーが実際に実行されないためです。それ以外の場合はname、その時点での現在の値が使用されます (ループの最後の値が何であれ)。

for (var j=0; j<tours.length; j++){
    var name = tours[j].name;

    var $tourLI = $('<li id="'+name+'"></li>');
    var $tourButton = $('<div class="button-inside"><span>'+name+'</span><span></span></div>');

    (function(n) {
        $tourButton.click(function() {
            alert(n);
        });
    })(name)
}

Answer 2

ループ内でクリックイベントを呼び出す必要はありません..動的に作成されたボタンを追加し、ループ外で呼び出してデリゲートイベントで使用します

これを試して

 $(document).on('click','div.button-inside',function() {
    alert($(this).text());
}

デリゲート イベントの詳細については、リンクを参照してください。

Answer 3

クリックがトリガーjされると、 valueが発生しますtours.length。クロージャーを介して、ループ値と残りの変数をロックできます。

for (var j=0; j<tours.length; j++){
  (function(){ 
    var currentJValue = j;
    var name = tours[currentJValue].name;

    var $tourLI = $('<li id="'+name+'"></li>');
    var $tourButton = $('<div class="button-inside"><span>'+name+'</span><span></span></div>');

    $tourButton.click(function() {
        alert(name);
    }
  })();
}

Answer 4

これを試して...

$('.div.button-inside ').on('click',function() {
    alert($(this).text());
}