jquery - jQuery单击事件未传递给附加跨度

Question

我点击 div id="tube_clx"。

此操作附加到 div，id="tube"其跨度为id="trash".

当我单击 id="trash" 的跨度时。我希望警报会弹出，但事实并非如此。

我做错了什么？

<div>
    <div id="tube_clx">[点击div]</div>
    <div id="tube"></div>
</div>

<script type="text/javascript">
    $(文档).ready(函数 () {

        $('#tube_clx').on('点击', function(){
            $('#tube').append('<span id="trash">[点击跨度]</span>');
        });

        $('#trash').on('点击', function(){
            警报（“嗨”）；
        });
    });
</脚本>

Answer 1

事件处理程序绑定到 ID 为 的任何元素#trash，但由于您尚未单击#tube_clx，因此 DOM 中没有此类元素。
要将事件附加到具有 ID 的任何未来元素#trash，您必须使用委托事件处理程序，如下所示：

$('#tube').on('click', '#trash', function(){ 
    alert('hi');
});

另请注意，它不是$('.tube_clx')，而是$('#tube_clx')，因为它是元素 ID。

小提琴

Answer 2

$('#trash')在您附加跨度之前调用它并返回一个结果集，因为#trash在您调用选择器时不存在，因此您的事件处理程序未绑定到任何元素。

使用事件委托并将事件处理程序附加到您的#tube元素：

$('#tube').on('click', '#trash', function(){