如何将单击事件添加到JQuery中动态添加的元素中

How do I add click events to dynamically added elements in JQuery?

本文关键字：添加 动态 元素 JQuery 单击 事件      更新时间：2023-09-26

我想添加动态创建元素的click事件。如何使用JQuery实现这一点？

$(function() {
   $('.class').after('<a href="#" onclick="displayHideBox('1'); return false;">Text</a>');
});

如何在jquery中实现onclick工作？

我想你要问的问题是"如何将点击事件添加到动态添加的元素中"，对吧？

假设你的标记是这样的：

<div id="someContainer">
    <p class="class">asdasd</p>
    <a href="#" class="newLink">Text</a>
</div>

如果是这样，您可以像这样使用.on()：

$("#someContainer").on('click','a.newLink', function() {
    displayHideBox('1');
    return false;
});

尝试一下：

$(function() {
   $('.class').each(function(){
    // construct link-OBJECT! here
    var link = $('<a />').attr('href', '#').click(function(){ displayHideBox('1'); }).text('Text');
    // insert link after ".class"-element
    $(this).after(link);
   });
});

你可以试试这个

$(function(){
    $('<a />', { href: '#', text: 'Text', click: function(e){ 
            e.preventDefault();
            displayHideBox('1'); 
        }
    }).insertAfter('.class');
});

演示。

相关文章：