Question

我有一个按钮，我将其附加到该页面。单击该按钮时，它应该运行一些代码。

不是仅在单击该按钮时触发，而是对页面的任何点击都会触发它。

我只用几行代码就可以复制这个问题，看看链接的JSFiddle。

var myButton = '<div id="myButton">Do Not Click Me</div>';
$('#parent').html(myButton);

jQuery(document).on('click', jQuery('#myButton'), function (e) {
    alert('marco');
});

https://jsfiddle.net/aj4u1y9n/

如何仅在单击按钮时才启动警报？

Answer 1

不要在这里使用jQuery选择器：

jQuery(document).on('click', jQuery('#myButton'), function (e)

相反，请执行：

$(document).on('click', '#myButton', function (e)

示例：

var myButton = '<div id="myButton">Do Not Click Me</div>';
$('#parent').html(myButton);

$(document).on('click', '#myButton', function(e) {
  alert('marco');
});

#myButton {
  background: #8888ff;
  padding: 1em;
  width: 4em;
  margin-left: 4em;
  margin-top: 4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
</div>

顺便说一句，您的代码可以简化为：

var myButton = '<div id="myButton">Do Not Click Me</div>';
$('#parent').html(myButton);

$('#myButton').click(function() {
  alert('marco');
});

#myButton {
  background: #8888ff;
  padding: 1em;
  width: 4em;
  margin-left: 4em;
  margin-top: 4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
</div>

BTW ，请勿在选择器jQuery和$之间切换，请使用其中一个。

Answer 2

您编写点击监听器的方式实际上是在监听整个文档的点击次数。看看jQuery API：

https://api.jquery.com/on/或
https://api.jquery.com/click/作为较短版本

了解更多信息。

你可以达到你想要的目标：

var $myButton = $('<div id="myButton">Do Not Click Me</div>');
$myButton.click(function (e) {
    alert('marco');
});
$('#parent').append($myButton);

说明：您可以在将元素插入DOM之前添加单击侦听器。在DOM中再次搜索它以添加点击处理程序是不必要的。

小提琴：https://jsfiddle.net/bkbczLug/

单击jQuery时单击动态元素触发未单击时

2 个答案: