为什么onclick函数不起作用？

Question

我试图简单地获取使用jQuery在div #thumb单击了哪个子元素.video-thumbnail的索引。 在调试器中，发生的情况是页面首次加载时进入on.('click'...)函数，并将其悬停两次，然后使用$(document).ready(...)并做同样的事情，将鼠标悬停两次，然后再完全加载页面并给出-1的警告框（这意味着video-thumbnail元素不存在）。 然后，我继续单击.video-thumbnail元素之一，但未触发任何操作。 它再次触发的唯一时间是当我将jQuery选择器修改为：（ ("#thumb").on('click', function(){...}); ，它选择并返回了正确的索引。

它甚至可以在jsfiddle中动态创建缩略图的情况下正常工作，并且无法从本地主机页面复制错误。 我不明白为什么相同的结果在本地主机上不起作用。

我检查了我的页面是否有任何错误，但一切运行正常。 有什么事吗 还有另一种方法可以使索引结果正常工作吗？

JS：

$(document).ready(function()
{
    var vidThumbnail = '<div class="video-thumbnail"><a target="_blank" href="#"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="https://i.ytimg.com/vi/Vpg9yizPP_g/default.jpg" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="#">' + "Example Thumbnail 1" + '</a><br/>' + "1:30" + ' / Views: ' + "24" + '</p></div>';
    var vidThumbnail2 = '<div class="video-thumbnail"><a target="_blank" href="#"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="https://i.ytimg.com/vi/YE7VzlLtp-4/default.jpg" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="#">' + "Example Thumbnail 2" + '</a><br/>' + "0:36" + ' / Views: ' + "42" + '</p></div>';

    $('#thumb').append(vidThumbnail);
    $('#thumb').append(vidThumbnail2);

    //$("#thumb").on('click', function() WORKS AND FIRES the onclick() when clicked on after page loaded
    $("#thumb .video-thumbnail").on('click', function()
    {
        console.log($("#thumb .video-thumbnail").index(this)); 
        alert($("#thumb .video-thumbnail").index(this)); // return index that was clicked
    }); 
});

Answer 1

在以下示例中，应该在dom加载就绪事件内执行任何操作。 您应该在jquery文档中检查点击事件和this定义。

$(document).ready(function()
{

    var vidThumbnail = '<div><div class="video-thumbnail"><a target="_blank" href="#"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="https://i.ytimg.com/vi/Vpg9yizPP_g/default.jpg" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="#">' + "Example Thumbnail 1" + '</a><br/>' + "1:30" + ' / Views: ' + "24" + '</p></div>';
    var vidThumbnail2 = '<div class="video-thumbnail"><a target="_blank" href="#"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="https://i.ytimg.com/vi/YE7VzlLtp-4/default.jpg" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="#">' + "Example Thumbnail 2" + '</a><br/>' + "0:36" + ' / Views: ' + "42" + '</p></div></div>';

    $('#thumb').append(vidThumbnail);
    $('#thumb').append(vidThumbnail2);


    $("#thumb .video-thumbnail").click(function(e){
        alert($(this).index()); // return index that was clicked
    })

}); 

Answer 2

我认为您使用的是错误的。 您应该将其绑定到顶级元素，如下所示：

$('body').on('click', '.video-thumbnail', function(){
});

我在您的jsfiddle中添加了它： https ://jsfiddle.net/wh501p71/1/