jquery - 向 iframe 内动态添加的元素添加事件

Question

我有这样的 HTML 代码

<iframe id="myframe">
    <ul>
        <li>
            <a href="" class="add-section">add section</a>
            <div>...</div>
        </li>
     <ul>
</iframe>

当单击“add-section”链接时，包含此（add-section）链接的parrent<li>会被复制并插入，代码变成这样。

<iframe id="myframe">
    <ul>
        <li>
            <a href="" class="add-section">add section</a>
            <div>...</div>
        </li>
        <li>
            <a href="" class="add-section">add section</a>
            <div>...</div>
        </li>
     <ul>
</iframe>

我使用这个 jquery 代码来实现这一点，它工作得很好。

$($("#myframe").contents().find('.add-section')).on("click",function(e){
    e.preventDefault();

    $(this).parent().after("<li>"+$(this).parent().html()+"</li>");

});

我的问题是当我单击新创建的（添加部分）链接时，代码不会执行。

我的问题是如何将点击事件添加到 iframe 中最新添加的元素。

提前致谢。

Answer 1

尝试将事件绑定到 body 元素，然后使用事件委托，如

$("#myframe").contents().find('body').on("click", '.add-section', function (e) {
    e.preventDefault();
    $(this).parent().after("<li>" + $(this).parent().html() + "</li>");
});