防止附加元素的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 字符串中删除 - 假设您可以控制它。