Question

应该是一个非常简单的答案，但我现在无法弄明白。我有这个按钮：

<button id="logout" type="button">Logout</button>

它应该在正文底部的脚本标记中运行这个jQuery代码：

$("#logout").addEventListener("click", function () {
    alert('Button Clicked');
});

但是，不会弹出警告。我不明白。提前谢谢。

Answer 1

addEventListener是DOM元素而不是jQuery对象的方法，它是一个类似于数组的结构，包含所有选定的DOM元素

要使用jQuery附加活动，请使用.on =＆gt; 将一个或多个事件的事件处理函数附加到所选元素

试试这个：

$("#logout").on("click", function() {
  alert('Button Clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="logout" type="button">Logout</button>

使用JS：

document.getElementById("logout").addEventListener("click", function() {
  alert('Button Clicked');
});

<button id="logout" type="button">Logout</button>

修改：您可以使用DOM element或jQuery selector

从$(SELECTOR)[0]返回的类数组对象中获得第一个$(SELECTOR).get(0)

Answer 2

addEventListener()方法在EventTarget上注册指定的侦听器。

如果您真的想使用addEventListener，请编写以下代码：

var el = document.getElementById("logout");
el.addEventListener("click", function () {
     alert('Button Clicked');
}, false);

否则使用jquery

$(document).on("click", "#logout", function () {
    alert('Button Clicked');
});

OR

$("#logout").on("click", function () {
        alert('Button Clicked');
    });

Answer 3

您应该使用on方法在jquery中使用事件处理程序。 addEventListener是一个核心JavaScript事件方法。

$("#logout").on("click", function() {
  alert('Button Clicked');
});

您仍然可以使用addEventListner将jQuery代码强制转换为JavaScript：

$("#logout")[0] //Now, this is JavaScript Object
   .addEventListener("click", function () {
    alert('Button Clicked');
});

Answer 4

您可以使用jQuery click / on功能让按钮生效。

示例：

$("#logout").on("click", function () { alert('Button Clicked'); });
$("#logout").click(function () { alert('Button Clicked'); });

Answer 5

替代答案是：

$(document).on("click", "#logout", function() {
  alert('Button Clicked');
});

这也适用于动态创建的元素。

Answer 6

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

    $(document).ready(function () {
        $("#logout").on("click", function () {
            alert('Button Clicked');
        });
    });
</script>
</head>

<body>
    <button id="logout" type="button">Logout</button>
</body>

</html>

Answer 7

var element = document.getElementById("logout");

element.addEventListener("click", myFunction);

function myFunction() {

     // your code logic comes here
}

Answer 8

如果你像在firebug中那样进入你的控制台并输入$()，你会看到jQuery对象，它显示了jquery函数/对象的方法和属性。此对象上没有addEventListener。

addEventlistener是DOM的一种方法。如果你想利用jQuery，那就少花钱，多做点什么。使用像on这样的jQuery方法。这将允许您在元素上添加事件处理程序。

$(document).on("click", "#logout", function() {
  alert('button clicked');
});

按钮单击jquery无法正常工作

8 个答案: