Javascript 为什么onclick函数不起作用？

我试图简单地获取使用jQuery在div

#thumb

中单击哪个子元素

.video thumbnail

的索引。在调试器中，当页面第一次加载时，它会转到

打开（'click'…）

函数并在上面悬停两次，然后我用

$（文档）做了另一个测试。ready（…）

做了同样的事情，在跨过并完全加载页面之前悬停两次，给出了一个-1的警告框（这意味着

视频缩略图

元素不存在）。然后我继续单击

视频缩略图

元素之一，但它没有触发任何内容。它唯一一次再次触发是在我将jQuery选择器修改为：

（“#thumb”）。在（'click'，function（）{…}）

上，它选择并返回正确的索引

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

我检查了我的页面是否有任何错误，但一切都正常。有什么问题吗？是否有其他方法可以让索引结果正常工作

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
    }); 
});

$（文档）.ready（函数（）
{
var vidThumbnail='
'+“1:30”+'/视图：'+“24”+'
'；
var vidThumbnail2='
'+“0:36”+'/视图：'+“42”+'
'；
$（'#thumb'）。追加（vidThumbnail）；
$（'#thumb'）。追加（vidThumbnail2）；
//$（“#thumb”）。在（'click'，函数（）工作，并在加载页面后单击时激发onclick（）
$（“#thumb.video缩略图”）。在（'click'，function（）上
{
console.log（$（“#thumb.video缩略图”）.index（this））；
警报（$（“#thumb.video缩略图”）.index（this））；//返回单击的索引
}); 
});

应该在下面的示例中的dom loaded ready事件中执行任何操作。您应该选中click events，并在

jquery

文档中选择此

定义

$(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
    })

}); 

$（文档）.ready（函数（）
{
var vidThumbnail='
'+“1:30”+'/视图：'+“24”+'
'；
var vidThumbnail2='
'+“0:36”+'/视图：'+“42”+'
'；
$（'#thumb'）。追加（vidThumbnail）；
$（'#thumb'）。追加（vidThumbnail2）；
$（“#thumb.video缩略图”）。单击（函数（e）{
警报（$（this.index（））；//返回已单击的索引
})
}); 
应该在下面的示例中的dom loaded ready事件中执行任何操作。您应该选中click events，并在
jquery
文档中选择此
定义

$(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
    })

}); 

$（文档）.ready（函数（）
{
var vidThumbnail='
'+“1:30”+'/视图：'+“24”+'
'；
var vidThumbnail2='
'+“0:36”+'/视图：'+“42”+'
'；
$（'#thumb'）。追加（vidThumbnail）；
$（'#thumb'）。追加（vidThumbnail2）；
$（“#thumb.video缩略图”）。单击（函数（e）{
警报（$（this.index（））；//返回已单击的索引
})
}); 
我认为您使用的是错误的。您应该将其绑定到顶级元素，如下所示：

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

我在您的JSFIDLE中添加了它：
我认为您使用的是错误的。您应该将它绑定到顶级元素，如下所示：

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

我在你的JSFIDLE中添加了它：
为什么你有一个
文档。ready
在
文档中。ready
？这是我正在做的一个测试…我删除了它，因为这不是问题的根源。很抱歉。thumb ID只有一个实例吗？请检查我给出的答案，我想这可能是你的问题。你为什么有
ddocument.ready
在
文档中。ready
？这是我正在做的一个测试…我删除了它，因为这不是问题的根源。很抱歉。thumb ID只有一个实例吗？请检查我给出的答案，我想这可能是你的问题。我有一个文档就绪函数，其中包含所有内容…所以我不知道为什么它仍然存在加载页面后不再工作。此外，它对父元素有效，但对其子元素无效，这很奇怪。尝试使用
$（此）
，同样的问题。我有一个文档就绪函数，其中包含所有内容…因此我不知道为什么在加载页面后它仍然不能工作。此外，它可以在父元素上工作，但不能在其子元素上工作，这很奇怪。尝试使用
$（此）
，同样的问题。非常有效。非常感谢！非常有效。非常感谢！