Question

我有以下HTML和JavaScript：

<!DOCTYPE html>
<html>        
<head>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <a href="#foo" id="bar">Something</a>
    <div id="foo></div>
    <script>
        $(function() {
            $link = $("#bar");
            $link[0].click(function() {
                alert("Whatever.");
            });
        });
    </script>
</body>
</html>

This article解释了该方法。但是，它不起作用-没有警报框显示。有什么想法吗？

Answer 1

只需从代码中删除[0]数组索引，并确保关闭div ID引号即可：

<html>        
<head>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
    <body>
        <a href="#foo" id="bar">Something</a>
        <div id="foo"></div>
        <script>
            $(function() {
                $link = $("#bar");
                $link.click(function() {
                    alert("Whatever.");
                });
            });
        </script>
    </body>
</html>

Answer 2

如果您不想打开链接而只警告任何文本，则可以尝试编写如下脚本：

$('#bar').click(function(e) {
    e.preventDefault();
    alert('Whatever.');
})

Answer 3

$link[0]将返回本机元素而不是jQuery对象，请使用onclick事件或addEventListener('click', ....)

$(function() {
  $link = $("#bar");
  $link[0].onclick = function() {
    alert("Whatever.");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#foo" id="bar">Something</a>
<div id="foo"></div>

使用jQuery通过索引选择元素的正确方法是使用eq()

$(function() {
  $link = $("#bar");
  $link.eq(0).click(function() {
    alert("Whatever.");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#foo" id="bar">Something</a>
<div id="foo"></div>

请注意，选择器ID仅返回1个元素，因此您可以使用第二个索引或更大的索引。

Answer 4

如果您将id用作公共选择器而不是做得不好，请使用class作为公共选择器，否则您无需执行类似$(id)[0]的操作。同样，养成在绑定完成后取消绑定事件的习惯。

$(function() {
    $link = $("#bar");
    $link.off('click').on('click', function() {
        let $this = $(this);
        let href = $this.attr('href');
        alert("href " + href);
    });
});

链接的点击事件

4 个答案: