编辑html后jQuery点击不更新

Question

我有一个下拉菜单，可让用户过滤在线商店中不同类型的商品。目前，每当用户单击添加按钮时，都会弹出一个警报，其中包含该项目的索引。这在页面首次加载并且未选择过滤器时有效，但是一旦应用了过滤器，则onclick不起作用。

https://jsfiddle.net/ar6hsmkq/3/

创建html的Javascript

    function createProductData(product, index){
    var trow = "<tr class='productlist' data-index='" + index + "' >";
        trow += "<td class='product-id'>" + product.name + "</td>";
        trow += "<td class='product-title'>"+product.description + "</td>";
        trow += "<td class='cost'>"+product.price + "</td>";
        trow += "<td class><button class='btn btn-primary addme ' data-index='"+ index +"'>Add</button></tr>";
    return trow;
}   

点击功能

/*
*adds an items index to the 'cart' array, calls the displayCart function
*/
$('.addme').on('click', function(){
    var thisButton = $(this);
    var index = parseInt(thisButton.data('index'));
    cart.push(index);
    alert(index);
    //displayCart();
})//end onlcick

当列出新列表时，类名不会改变，因此我不完全确定是什么导致了打嗝。