在javascript使用element.innerHTML创建的元素上触发onclick事件[重复]

Posted 2023-05-07

【中文标题】在javascript使用element.innerHTML创建的元素上触发onclick事件[重复]

【英文标题】：Fire onclick event on the element created by javascript using element.innerHTML [duplicate]

【发布时间】：2019-05-28 21:41:22

【问题描述】：

我正在使用这段代码通过 javascript 创建一个删除按钮：

btnclick = '<button class="deleteMe">' + 'X' + '</button>';
output.innerhtml = "whatever" + btnclick;

如何在此按钮上触发onclick 功能？现在我正在做这样的事情：

$(document).ready(function() 
  $(".deleteMe").on("click", function()
    alert("clicked");
  );
);

点击按钮时我没有收到任何警报消息。

【问题讨论】：

这会帮助你***.com/questions/6658752/…

【参考方案1】：

假设你有 div 作为输出，

你可以简单地在你的 div 中添加按钮并执行函数

$('#output').append('whatever  <button class="deleteMe">x</button>');
$(document).ready(function() 
  $('body').on('click','.deleteMe',function() 
    alert('delete button clicked!!!');
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output"></div>

【讨论】：

谢谢，它帮助了我。但是你能告诉我你为什么使用 output.append 以及它是如何产生影响的以及为什么在我使用 output.innerHTML 时它不起作用

.append 是一个 Jquery 函数，我不知道你的场景中输出的是什么（div，body，span），如果你想在这里使用innerHTML，请使用output[0].innerHTML

如果你理解了，请点赞我的回答

Jquery 事件监听器不适用于动态元素。您可以使用以下语法将事件侦听器添加到动态元素： $(document).ready(function() $("body").on("click",".deleteMe", function() alert("点击"); ); );

此解决方案不起作用。请更新您的答案如下： $('#output').append('whatever x'); $(document).ready(function() $('body').on('click', '.deleteMe',function() alert('delete button clicked!!!'); ); ) ;