设置/更新会话购物车的Ajax调用没有触发

我使用stackoverflow来回答几乎所有关于php脚本的问题，在这里我学到了关于ajax调用、jquery和javascript相关问题的大部分知识。我现在有一个，但是我似乎找不到答案，我不确定我做错了什么。

基本上，它是一个使用ajax调用在会话中存储产品id的购物车-在ajax调用成功后，如果购物车托盘被隐藏(当它没有被设置时)，则应该出现购物车托盘。然而，问题是，即使是最基本的ajax调用也会中断。我的HTML看起来像这样(每个产品)，缩短了url，因为它们对示例无关紧要，它们只是链接到产品页面:

<article>
<a href="#">
    <img nopin="nopin" alt="#" src="#">
</a>
<h5>
    <a href="#">Product name</a>
</h5>
<p class="price">
    <a href="#">&euro; 0,00</a>
</p>                
<input type="button" name="bestelknop" id="bestelknop" data-id="'.$product['p_id'].'" value="In winkelmandje">
</article>

我使用ajax调用解析为php文件，其唯一功能是更新购物车:

<?php
session_start();
if(isset($_POST['p_id'])) {
$p_id = $_POST['p_id'];
$_SESSION['cart'][$p_id]++; //add one to the quantity of the product with id $product_id 
}
?>

ajax调用看起来像这样:

$(document).ready(function() {
$("#bestelknop").click(function() {
    var p_id = $(this).attr('data-id');
    $.ajax({
        type : 'POST',
    url : '/paginas/winkelmandje/toevoegen.php',
    data: 'p_id='+p_id,
    success : function(data){
                $( "#nav-winkelmandje" ).load('/menu/winkelmandje.php'); 
                if($( "#nav-winkelmandje" ).is(':hidden')) {
       $( "#nav-winkelmandje" ).slideDown();
                }
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) 
    {alert ("Er is iets fout gegaan bij het bestellen. Druk op F5 en probeer het opnieuw.");}
    });
});
});

问题是;第一次成功。我点击一个产品的按钮，ajax调用就成功了，生成的div就可见了(显示购物车中有一个产品)。当我现在单击另一个具有另一个数据id的产品时，ajax调用根本不会触发。我完全不知道为什么会发生这种事，还有人知道吗?元素检查在chrome和php错误报告给我任何错误。

thanks in advance，

斯蒂芬

编辑:点击的第一个产品的按钮仍然有效。我可以在会话中添加更多的产品，但是其他按钮不起作用。

编辑2:按钮不工作可能是因为我在javascript中使用id作为选择器。现在我已经将其更改为类并触发函数，就像在中一样，我放置了一个警报来查看java是否被调用，并且它被调用了。但是，ajax调用没有触发，并且仍然没有给出响应。