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

Question

我使用下划线创建一些元素并使用 jQuery 将它们附加到 div。

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

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

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

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

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

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

我的 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);

我找到了一个 similarly worded question但不知道如何在这里应用它的答案。

Answer 1

不是直接将事件绑定(bind)到元素，而是将一个事件绑定(bind)到它们的容器元素，然后委托(delegate)它:

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

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

---

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

在您的场景中，元素被添加到带有 id 的元素中的“divID”。因此，这两个选择器从何而来。

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

如果您将委托(delegate)选择器更改为 "span.pickup" 甚至会有所帮助(如果您知道元素将始终是 <span>，就像在您的模板中一样)，以便首先按标签名称过滤 DOM。

---

引用:

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