点击活动无法在Chrome上运行，但在Firefox中运行正常

Question

我的代码使用jquery向页面添加元素，然后向其添加“click”事件。代码是：

$('.photosItem').mouseover(function() {
        // Remove all existing comment buttons
        $('.reelPhotoPageCommentLink').remove();
        // Add a comment button
        var commentButton = "<div class='reelPhotoPageCommentLink'>";
        commentButton += "Comment";
        commentButton += "</div>";
        $(this).prepend(commentButton);
        // Add click event to comment button
        $('.reelPhotoPageCommentLink').click(function() {
            $('#editPopupForm').remove();
            // Get photo id
            var photoID = $(this).parent().attr('photo_id');
            var url = "get_photo_comment_form/" + photoID;
            $.ajax({ 
                url: url,
                type: "POST",
                success: function(data) {
                    // Add item after header
                    $('#header').after(data);
                }
            });
        });
    });

因此，当您将鼠标悬停在带有“photosItem”类的照片上时，会出现“评论”按钮。单击该按钮会弹出注释框。这在Firefox上工作正常，但我在Chrome上遇到了麻烦，Chrome似乎没有拿起点击事件。它在我悬停时添加注释按钮，但点击它不会做任何事情。控制台在任何阶段都没有错误。

我在$（'。reelPhotoPageCommentLink'）之后添加了一个console.log。单击（function（）{，它没有显示，所以看起来像click事件被忽略了。

任何人都有任何想法如何让这个工作？这在Firefox中很好，并且没有警告或错误。

谢谢！

Answer 1

当您动态地将.reelPhotoPageCommentLink添加到DOM时，即在DOM加载之后，您需要委托事件处理程序。

$('.photosItem').on('click', '.reelPhotoPageCommentLink', function() {

});

虽然您的代码适用于某些浏览器，但上面是正确的过程。

如果将click处理程序代码置于mouseover事件之外，将其绑定在另一个事件中的任何事件都不是一个好主意。

完整代码如下：

// Add click event to comment button

 $('.photosItem').on('click', '.reelPhotoPageCommentLink', function() {
    $('#editPopupForm').remove();
    // Get photo id
    var photoID = $(this).parent().attr('photo_id');
    var url = "get_photo_comment_form/" + photoID;
    $.ajax({ 
        url: url,
        type: "POST",
        success: function(data) {
            // Add item after header
            $('#header').after(data);
        }
    });
});

$('.photosItem').mouseover(function() {
    // Remove all existing comment buttons
    $('.reelPhotoPageCommentLink').remove();
    // Add a comment button
    var commentButton = "<div class='reelPhotoPageCommentLink'>";
    commentButton += "Comment";
    commentButton += "</div>";
    $(this).prepend(commentButton);
});

Answer 2

在鼠标悬停上附加事件处理程序似乎是一个坏主意。您应该使用委托事件编程模型，该模型将事件处理程序附加到DOM中的更高级别，并且可以处理动态添加的内容。 e.g。

$('.photosItem').on('click', '.reelPhotoPageCommentLink', function(e) {

});

Answer 3

我最终放弃了这一点。

相反，我在页面加载时生成了带有点击事件的按钮，但却将它们隐藏起来。翻转然后显示按钮而不是生成按钮。

感谢您帮助codeparadox和Malevolence。知道jsfiddle也很方便 - 我相信我会再次使用它。