在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中使用“this”的不同方式
JavaScript 在Javascript中使用“typeof”运算符