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

Question

我正在 javascript 使用此代码创建删除按钮：

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

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

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

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

Answer 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>

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

Fire onclick event on the element created by javascript using element.innerHTML

javascript

jquery

onclick

innerhtml