对于通过函数添加的项目,jQuery不会使用.on()绑定点击下划线模板

Question

我正在使用下划线来创建一些元素并使用jQuery将它们附加到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);

我找到了一个措辞相似的问题,但无法弄清楚如何在这里应用它的答案.

Answer 1

不是将事件直接绑定到元素,而是将一个事件绑定到它们的容器元素,并委托它:

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

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

在这种情况下,事件处理程序仅对容器内#divID具有"拾取"类的元素执行.

在您的场景中,元素将添加到具有id"divID" 的元素中.因此,两个选择者来自哪里.

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

如果您将委托选择器更改为"span.pickup"(如果您知道<span>模板中的元素将始终如此),它甚至可以帮助,以便首先通过标记名称过滤DOM.

参考:

• http://api.jquery.com/on/#direct-and-delegated-events