为什么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/

为什么onclick 函数不起作用？

Why is the onclick function not working?

javascript

jquery

onclick

document-ready