3

我使用下划线来创建一些元素并将它们附加到带有 jQ​​uery 的 div 中。

在页面底部，我使用 jQuery.on()来响应对元素的点击。

$('.pickup').on('click',
    function(e) {
        alert("hello");
    }
);

通过一些用户交互（在谷歌地图中），我必须向 div 添加更多元素并希望它们也响应点击。出于某种原因，他们没有。我已经在 jsfiddle 上削减了所有内容：

http://jsfiddle.net/thunderrabbit/3GvPX/

当页面加载时，请注意单击输出中的行将alert('hello')通过 jQuery。

但是点击【添加】按钮，新行不响应点击。

我的 HTML

<div id="unit_2225" class="pickup">
    <span>Click me; I was here first</span>
</div>
<script type="text/template" id="unit-template">
    <div class="unit-item">
        <span class="pickup">
            <span>click us (<%= unit_id %>) via underscore</span>
        </span>
    </div>
</script>
<div id="divID">
</div>
<button>add</button>

我的 Javascript

var addUnitToDiv = function(key,val) {
    console.log(val);
    var template = _.template($('#unit-template').html(),val);
    $('#divID').append(template);
}

var unit_ids = [{unit_id:'hello'},
                {unit_id:'click'},
                {unit_id:'us'},
                {unit_id:'too'},
                {unit_id:112}];

$.each(unit_ids, addUnitToDiv);

var unit_pids = [{unit_id:'we'},
                 {unit_id:'wont'},
                 {unit_id:'respond'},
                 {unit_id:'to'},
                 {unit_id:'clicks'},
                 {unit_id:358}];

createMore = function() {
    $.each(unit_pids, addUnitToDiv);
}

$('.pickup').on('click','span',function() {
    alert("hello");
});

$('button').click(createMore);

我发现了一个措辞相似的问题，但不知道如何在这里应用它的答案。

4

2 回答 2

12

与其将事件直接绑定到元素，不如将一个事件绑定到其容器元素并委托它：

$("#divID").on("click", ".pickup", function () {
    // Your event handler code
});

演示：http: //jsfiddle.net/3GvPX/3/

在这种情况下，事件处理程序仅对容器内#divID具有“pickup”类的元素执行。

在您的场景中，元素被添加到具有id“divID”的元素中。因此，这两个选择器来自哪里。

这很方便，因为正如您所发现的，动态添加元素并不会神奇地绑定事件处理程序。通常绑定的事件处理程序仅在绑定时存在的.on()那些上执行（绑定）。

"span.pickup"如果您将委托选择器更改为（如果您知道模板中的元素将始终是类似的），它甚至会有所帮助<span>，以便首先按标签名称过滤 DOM。

参考：

于 2013-04-25T05:00:37.120 回答
3

工作演示 http://jsfiddle.net/u2KjJ/

http://api.jquery.com/on/

.on() 方法将事件处理程序附加到 jQuery 对象中当前选定的元素集。您可以在文档级别附加处理程序。

希望能满足需求:)

代码尝试下面更改的代码

$(document).on('click','.pickup',function() {
    alert("hello");
});
于 2013-04-25T05:02:03.230 回答