對於通過函數添加的項目，jQuery不會使用.on（）綁定點擊下划線模板

Question

我正在使用下划線來創建一些元素並使用jQuery將它們附加到div。

在頁面的底部，我使用jQuery的.on()來響應元素的點擊。

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

通過一些用戶交互（在谷歌地圖中），我必須向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);

我找到了一個措辭相似的問題，但無法弄清楚如何在這里應用它的答案。

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

Answer 2

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

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

.on（）方法將事件處理程序附加到jQuery對象中當前選定的元素集。 您可以在文檔級別附加處理程序。

希望它符合需要， :)

代碼嘗試下面更改的代碼

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