防止附加元素的onclick事件？

Question

我有一个页面，其中一些 onclick 代码被添加到附加元素，我想阻止 onclick 代码被触发。

这是我尝试过的方法：

$(function() {
  $('.container').append('<div class="appended" onclick="alert(\'DONT DISPLAY\')">CLICK ME</div>');
  
  // Prevent onclick
  $(document).on('click', '.appended', function (e) {
    e.preventDefault();
    return false;
  });
});

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

不幸的是，这并没有阻止 onclick 所期望的行为

EDIT 应该提到这一点，但我无权访问将 onclick 事件添加到 HTML 的代码，但是如果可以在事后对附加元素执行此操作，我愿意删除该属性。

Answer 1

一个选项是使用 removeAttr()

删除 onclick 属性

$('.container').append('<div class="appended" onclick="alert(\'DONT DISPLAY\')">CLICK ME</div>');

$('.appended').removeAttr('onclick');

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

文档：removeAttr()

Answer 2

为此，您需要调用 removeAttr() 并删除 onclick 属性：

var $div = $('<div class="appended" onclick="alert(\'DONT DISPLAY\')">CLICK ME</div>').removeAttr('onclick');
$('.container').append($div);

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

更好的是，将它从您实际附加的 HTML 字符串中删除 - 假设您可以控制它。

防止附加元素的onclick事件？

Prevent onclick event of appended element?

jquery

append

preventdefault