javascript - jQuery on click 用于在未单击时触发动态元素

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>

顺便说一句，不要在选择器 jQuery 和 $ 之间切换，使用其中之一。