append - 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);
});

问题是在附加链接上使用时未触发单击事件，尽管我尝试使用 on()。我究竟做错了什么？

谢谢！

Answer 1

您当前的事件侦听器相当于.click(). 您必须使用事件委托：

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