0

I have a drop down menu that lets users filter through different types of items in an online store. Currently, whenever a user clicks the add button, an alert should pop up with the index of the item. This works when the page first loads and no filter is selected, but once the filter is applied, the onclick doesn't work.

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

Javascript that creates the html

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

Click function

/*
*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

The class name doesn't change when a new list is put out, so I'm not entirely sure what's causing the hiccup.

ajjohnson190
  • 494
  • 2
  • 7
  • 21
  • 3
    maybe `$(document).on('click', '.addme', function(){}` – morne Apr 23 '18 at 19:56
  • Note you are currently recreating the html every time you change the filter, you could instead just hide (ie `display:none`) the ones that do not match the filter, and show the ones that do. – Patrick Evans Apr 23 '18 at 19:58

0 Answers0