Question

我正在创建缩略图列表并尝试向每个缩略图添加click个侦听器：

 function loadVideoList(chan) {
    var this_chan = chan, $list = $('<div></div>');

    console.log("Globals.videos[this_chan].video.length = " + Globals.videos[this_chan].video.length);

    for(var i in Globals.videos[this_chan].video) {
        var this_video = Globals.videos[this_chan].video[i];


        var $thumbnail = $('<img id="video-list-thumb-' + i + '"' + ' rel="' + i + '"' +
                           ' title="' + this_video.title_quot + '"/>');


        $thumbnail
            .attr('src', 'img/noimage.png')
            .attr('style', 'display:block;')
            .attr('data-original', getThumbnailUrl(this_chan, i));


        ////////////////////////////////////
        // Hangout 
        $('#video-list-thumb-' + i).on("click", function() {
            console.log("click --  i = " + i);

            addButtonBinding('#video-list-thumb-' + i);
        });

        $list.append($thumbnail);
    }

    $('#video-list')
        .stop(true, true)
        .html($list)
        .show()
        .animate({ width:140, padding: 0 }, 1000, function() {
            $('img').lazyload({
                effect : "fadeIn",
                container: $("#video-list")
            });
        });
}

不起作用。什么都没发生。永远不会记录console.log("click -- i = " + i);。我正在使用JQuery 2.1.0。

如果我将以下循环添加到函数的末尾，尝试在将元素插入DOM后绑定侦听器：

 for(var i in Globals.videos[this_chan].video) {
    $('#video-list-thumb-' + i).on("click", function() {
        console.log("click --  i = " + i);

        addButtonBinding('#video-list-thumb-' + i);
    });
 }

然后，为i记录的值始终是i的最后一个值 - 数组的长度 - 1.这将传递给我的addButtonBinding函数。所以，无论我点击它没有加载相应的视频，它都会加载阵列中的最后一个视频。

Answer 1

尝试，

$thumbnail.attr('src', 'img/noimage.png')
          .attr('style', 'display:block;')
          .attr('data-original', getThumbnailUrl(this_chan, i));
          .on("click", function() {
              //Your code here.
           });

这可行，但循环内的绑定事件不是一个好习惯。您应该为这些图像元素添加一个公共类，例如imgClass，并使用event delegation将事件绑定到它，在循环旁边。

$('#video-list').on('click','.imgClass',function(){
  //code goes here.
});

将侦听器添加到动态创建的元素 - “on”不起作用

1 个答案: