代码之家 › 专栏 › 技术社区 › TimB

链接的单击事件

css html jquery javascript

TimB · 技术社区 · 7 年前

我有以下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 解释方法。但是它不起作用-没有警报框显示。有什么想法吗?

4 回复 | 直到 7 年前

ewwink 7 年前

这个 $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”>某物</a>
<DIV id=“foo”></DIV>

请注意选择器 ID 将只返回1个元素,这样您就可以使用第二个或更大的索引。

Nathan Champion 7 年前

只需从代码中删除[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>

Anlis 7 年前

如果不想打开链接,但只警告任何文本,可以尝试编写类似这样的脚本:

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

Sushil 7 年前

如果您正在使用 id 作为常见的选择器,请使用 class 对于普通选择器,您不需要执行类似的操作 $(id)[0] . 另外,在绑定完成后,养成取消绑定事件的习惯。

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前