-3

ループがあります

for (i = 0; i < 10; i++)
{
    outPut.innerHTML += "<div id='file" + i + "'>" + i + "</div>";
    $('#file' + i).on('click', function(event) {
        alert('User clicked on ' + i);
    }).css('cursor', 'pointer');
}

そして最後の要素だけがイベントを添付します。何が問題ですか？

ここでテストを参照してくださいhttp://jsfiddle.net/haF7Y/

4

4 に答える 4

1

これがあなたが見逃しているものです - イベントリスナーは本質的に非同期です! したがって、このようなタスクを実行するときは、常にループ内でクロージャ関数を使用してください! 下記参照 -

for (i = 0; i <10; i++){
  (function(i){
    outPut.innerHTML +="<div id='file"+ i + "'>" + i+ "</div>";
    $('#file' + i).on('click', function(event) {
      alert('User clicked on ' + i);
    }).css('cursor', 'pointer');
  }(i))
}
于 2013-03-13T20:48:01.487 に答える
1

からクリック イベントを削除しますfor loop。

$(document).on('click', '[id^=file]', function(e){
    alert('user clicked on '+ this.id.split('file')[1]);
});
于 2013-03-13T20:28:06.337 に答える
1

このようにjqueryオブジェクトを操作します（そしてクロージャーを作成します）

var jOutPut = $('div:first');

var create = function(i) {
    var j = $('<div/>')
        .attr('id', 'file' + i)
        .css('cursor', 'pointer')
        .html(i)
        .click(function(event){
            alert('User clicked on ' + i);
        });

    jOutPut.append(j);
}

for(i=0;i<10;i++) {
    create(i);
}
于 2013-03-13T20:29:08.967 に答える
0

コードは次のように記述します。 

for (i = 0; i < 10; i++)
{
    var newEl = $("<div class='file' data-index='"+i+"'>" + i + "</div>").css('cursor', 'pointer');
    outPut.append(newEl);
}

$('.file').click(function(event) {
        alert('User clicked on ' + $(this).attr('data-index'));
});

そして、これが機能することを示すためのフィドルがあります：http://jsfiddle.net/qX8RQ/

于 2013-03-13T20:33:19.170 に答える