jquery用on（）爲一個附加元素觸發事件

Question

我基本上有一個產品列表，只有其中一個可以是默認的。這是基本的html：

<td> 
    Product 1 
    <br><span id="defaultProduct1"><a href="#" class="makeDefaultProduct">This product as default?</a></span> 
</td> 
<td> 
    Product 2 
    <br><span id="currentDefaultProduct2"><strong>Default product</strong></span> 
</td> 

許多非默認和只有一個默認值。

當用戶點擊該鏈接，使產品默認情況下，它會觸發一段腳本是

1. 通過AJAX做一些DB東西
2. 打開鏈接到<strong>Default Product</strong>
3. 打開以前的默認進入鏈接

下面是腳本的一部分 - 代表$（有正確的跨度）的選擇：

$('span[id^="defaultProduct"] a').on("click", function(e) { 
    e.preventDefault(); 
    //(...) 
    selectorProduct.empty().append('<strong>Default product</strong>').attr('id', 'currentDefaultProduct'+productId); 
    selectorCurrentDefault.empty().append('<a href="#" class="makeDefaultProduct">This product as default?</a></span>').attr('id', 'defaultProduct'+currentDefaultProductId); 
}); 

問題是點擊事件在附加鏈接上使用時未觸發，儘管我嘗試使用on（）。我究竟做錯了什麼？

謝謝！

Answer 1

您當前的事件偵聽器相當於.click()。你必須使用事件委託：

$('table').on('click', 'span[id^="defaultProduct"] a', function(e) { 
    ... 
});