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

Posted

技术标签:

【中文标题】在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 '); $(document).ready(function() $('body').on('click', '.deleteMe',function() alert('delete button clicked!!!'); ); ) ;

以上是关于在javascript使用element.innerHTML创建的元素上触发onclick事件[重复]的主要内容,如果未能解决你的问题,请参考以下文章

javascript - 使用另一个函数中的变量 javascript - '今天未在对象中定义'

javascript 使用

javascript 在JavaScript中使用“this”的不同方式

JavaScript 在Javascript中使用“typeof”运算符

JavaScript高级程序设计在HTML中使用JavaScript

javascript 创建一个javascript文件以在其他地方使用