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
做一些数据库的东西
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);
});

问题是，在附加链接上使用时不会触发click事件，尽管我尝试使用on（）。我做错了什么？

谢谢！

Answer 1

您当前的事件监听器等同于.click()。您必须使用事件委派：

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