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

【问题标题】：Fire onclick event on the element created by javascript using element.innerHTML [duplicate]在javascript使用element.innerHTML创建的元素上触发onclick事件[重复]
【发布时间】：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");
  });
});

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

【问题讨论】：

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

标签： javascript jquery onclick innerhtml

【解决方案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 '); $(document).ready(function(){ $('body').on('click', '.deleteMe',function(){ alert('delete button clicked!!!'); }); }) ;