Question

假设我正在构建类似订单购物车的东西。

我有一个主页和很多子页面。在子页面上，我有一些指定的产品，用户可以通过点击按钮添加到订单中。

如果用户单击该按钮，则调用javascript获取产品名称并将其发送到某个PHP文件，该文件将此产品名称添加到某些$ _SESSION数组中。

如果购物车中至少有一个产品，则会出现屏幕底部的FIXED div。这个div运行模态（bootstrap），它包含用户添加到订单中的所有产品。我再次使用javascript + AJAX来确定点击。如果是，则调用.php文件，返回STRING包含所有产品。然后，此字符串将附加到此模式内的div。

此模式的内容如下：

'name_of_the_product'，'删除'，'id_from_session_array' ... ...

因此，如果他不再希望将此产品放入购物车，我希望允许用户对此列表中的任何产品使用DELETE选项。我将删除文本包装在一些锚中并给它上课 - 让我们说'.delete_from_cart'。

现在，当我尝试检查javascript时是否单击了此元素（'.delete_from_cart'），没有任何反应。示例代码如下：

$('.delete_from_cart').click(function() {
   alert("foo");
});

点击一些.delete_from_cart div后根本没有警报。但是，在代码源中，所有这些锚都有这个类。

如何解决这个问题？看起来javascript在这个div中没有看到来自ajax的附加元素。有什么帮助吗？

Answer 1

因为你说你的模态是使用Ajax调用生成的，所以你将无法将click事件附加到元素。您需要使用jQuerys on（）方法绑定onclick。

$("#themodal").on( "click", ".delete_from_cart", function(){
 alert('it worked');

}）;

参见on（）方法更多细节。 https://api.jquery.com/on/