Question

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

它甚至可以在动态创建缩略图的jsfiddle中正常工作，并且无法从我的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
    }); 
});

Answer 1

应该在下面的例子中在dom加载的ready事件中进行任何操作。您应该在this文档中查看点击事件和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
    })

});

Answer 2

我认为你错了。您应该将它绑定到顶级元素，如下所示：

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

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

为什么onclick功能不起作用？

2 个答案: