Question

我的HTML代码是

<a href='someValidLink' class="link">
    <img src='imageUrl'/>
</a>

和js脚本是

$('.link').click(function(e) {
    console.log("log something");
    return false;
});

现在点击图片不应该将我重定向到新页面，但不知何故它是

到目前为止，我已经尝试将相同的类放在img标签中，使用id而不是class，e.preventDefault而不是只返回false等...

但是，如果我删除img节点并放置一些文本，那么它应该正常工作，但是如何防止图像链接重定向

Answer 1

如果动态创建HTML，则不能使用标准静态绑定，该绑定仅适用于存在的元素，并且可以在DOM准备就绪时选择。

$(document).ready(function() {
    $(document).on("click", ".link", function(e) {
        console.log("log something");
        return false;
    });
}

http://api.jquery.com/on/

jQuery的“on”是处理此问题的首选方法。

Answer 2

我猜测锚是动态加载的。

尝试使用以下内容：

$(document).on("click", ".link", function(){
    console.log("log something");
    return false;
});

这将在单击时查找“link”类，而不是“link”类在页面初始加载时指向的位置。避免使用“实时”监听器代替“on”监听器。它已被弃用，取决于您使用的jQuery版本，它可能甚至不可用。

Answer 3

代码似乎很好。您确定在页面中加载元素之前没有执行此代码吗？尝试在$(document).ready回调中添加它：

$(document).ready(function() {
    $('.link').click(function(e) {
        console.log("log something");
        return false;
    });
}

Answer 4

发现问题，a-Tag是动态创建的，所以猜测我将不得不使用与简单点击功能不同的东西

JQuery点击<a> tag not working</a>内

4 个答案: