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的行为

编辑应该已经提到了这一点，但是我无权访问将onclick事件添加到HTML的代码，但是我愿意删除该属性（如果有）实际上，可以对附加的元素执行此操作。

Answer 1

一种选择是使用onclick删除removeAttr()属性

$('.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事件？

2 个答案: