Question

点击带有id="tube_clx"的div。

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

当我点击带有id =“垃圾”的跨度时。我希望提醒流行，但事实并非如此。

我做错了什么？

<div>
    <div id="tube_clx">[click div]</div>
    <div id="tube"></div>
</div>

<script type="text/javascript">
    $(document).ready(function () { 

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

        $('#trash').on('click', function(){ 
            alert('hi');
        });
    });
</script>

Answer 1

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

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

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

FIDDLE

Answer 2

在附加span之前调用

$('#trash')并返回结果集，因为调用选择器时#trash不存在，因此事件处理程序不绑定到任何元素。

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

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

jQuery单击事件未传递给附加的span

2 个答案: