如何将点击事件添加到 JQuery 中动态添加的元素？答案

【问题标题】：How do I add click events to dynamically added elements in JQuery?如何将点击事件添加到 JQuery 中动态添加的元素？
【发布时间】：2012-08-31 23:03:54
【问题描述】：

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

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

【问题讨论】：

想做什么工作？您的代码在做什么以及您希望它做什么？

标签： javascript jquery

【解决方案1】：

如何在 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;
});

【讨论】：

【解决方案2】：

试试看：

$(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);
   });
});

【讨论】：

【解决方案3】：

你可以试试这个

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

DEMO.

【讨论】：