Question

当我点击示例4中的“Google”链接时，我收到2条警报消息。[它还显示alert3消息]。请为此提供解决方案。我试图区分示例4中的链接但没有结果我收到2条提醒信息。

这段代码出了什么问题。我是Jquery世界的新手。

Jquery代码：

//Example 03 - Prevent Default Action of HTML Element 
$(document).ready(function(){
    $("a").click(function(e){
        e.preventDefault();
        alert("Example 3 :: The default action of anchor element has been prevented using Jquery");
    });
});

    //Example 04 - Is Default Action Prevented of HTML Element
    $(document).ready(function(){
        $("a.checkaction").click(function(event){
            event.preventDefault();
            alert("Example4 :: Is default action prevented of anchor <a>element :: "+event.isDefaultPrevented());
    });
});

HTML代码：

<!-- Jquery example 03 - Prevent default behavior of HTML element using Jquery -->
<h1 class="header">Example 3  - Prevent default behavior of HTML Element</h1>
<a href="http://www.facebook.com">Facebook</a>

<!-- Jquery example 04 - How to check whether the default action oh html is prevented or not using jquery -->
<h1 class="header">Example 4  - How to check whether the default action oh html is prevented or not</h1>
<a href="http://www.google.com" class="checkaction">Google</a>

Answer 1

您可以将第一个处理程序更改为：

$("a:not(.checkaction)").click(function(e){
    e.preventDefault();
    alert("Example 3 :: The default action of anchor element has been prevented using Jquery");
});

或者您可以组合两个处理程序：

$("a").click(function(e) {
    e.preventDefault();
    if ($(this).hasClass("checkaction")) {
        ...
    } else {
        ...
    }
});

Answer 2

尝试以下内容。

请注意 ，您只需将jQuery函数包装在一个$document.ready()函数中。此外，当您单击示例4时，您收到两个弹出窗口，因为您将jQuery选择器设置为应用于所有anchors。我在example-3添加了一个anchor类，并修改了js来调用它。我还使用return false;来阻止默认操作，而不是你的方式。在这种情况下，清洁并做同样的事情。

<强> JQUERY：

$(document).ready(function(){

    //Example 03 - Prevent Default Action of HTML Element 
    $("a.example-3").click(function(){
        alert("Example 3 :: The default action of anchor element has been prevented using Jquery");

        return false;
    });

    //Example 04 - Is Default Action Prevented of HTML Element
    $("a.checkaction").click(function(){
        alert("Example 4 :: The default action of anchor element has been prevented using Jquery");

        return false;
    )};
});

<强> HTML：

<!-- Jquery example 03 - Prevent default behavior of HTML element using Jquery -->
<h1 class="header">Example 3  - Prevent default behavior of HTML Element</h1>
<a href="http://www.facebook.com" class="example-3">Facebook</a>

<!-- Jquery example 04 - How to check whether the default action oh html is prevented or not using jquery -->
<h1 class="header">Example 4  - How to check whether the default action oh html is prevented or not</h1>
<a href="http://www.google.com" class="checkaction">Google</a>

Answer 3

Mate，示例3将为页面中的所有锚元素（facebook链接和谷歌链接）挂钩点击功能。然后，示例4将挂钩另一个点击功能为谷歌链接...所以谷歌链接将处理两次

将代码更改为以下内容：

jQuery代码：

//Example 03 - Prevent Default Action of HTML Element 
$(document).ready(function(){
    $("a[name=fb]").click(function(e){
       e.preventDefault();
        alert("Example 3 :: The default action of anchor element has been prevented using Jquery");
   });
});

//Example 04 - Is Default Action Prevented of HTML Element
$(document).ready(function(){
    $("a[name=gg]").click(function(event){
        event.preventDefault();
        alert("Example4 :: Is default action prevented of anchor <a>element ::       "+event.isDefaultPrevented());
});
});

Html代码：

 <!-- Jquery example 03 - Prevent default behavior of HTML element using Jquery -->
<h1 class="header">Example 3  - Prevent default behavior of HTML Element</h1>
<a name="fb" href="http://www.facebook.com">Facebook</a>

<!-- Jquery example 04 - How to check whether the default action oh html is prevented or not using  jquery -->
<h1 class="header">Example 4  - How to check whether the default action oh html is prevented or not</h1>
<a name="gg" href="http://www.google.com" class="checkaction">Google</a>

希望它有意义

利奥

如何区分jquery中的链接？

3 个答案: