How to call jQuery click event from innerHTML?

Question

In my javascript on load in my index.html, I am getting the data from my backend (Flask app) and putting in a javascript variable. The reason why i am doing this is that while I can directly inject from flask end using {% data %} and do a for loop, I want to do filtering on my data dynamically. For this instead of me fetching from my server always, this is why i load it into a javascript object.

Index.html

<script type="text/javascript">
    
    window.onload = function() {
        
        var productdata = JSON.parse('{{ data | tojson | safe}}');
        console.log(productdata)
        var output = "";
        for (var i in productdata) {
            output += "<div class='item' data-product style='float: left; width: 200px;'>"
                + "<article class='product'>"
                + "<a href='/getproduct?priceid=" +productdata[i].priceid+ "'data-url'>"
                + "<img src="+ productdata[i].images+" class='img-fluid' data-img></a>"
                + "<div class='price-group'>"
                + "<div class='price'><span class='currency' data-product-currency>$</span> <span data-product-price>"+productdata[i].price+"</span></div>"
                + "</div>"
                + "<h3><a>"+productdata[i].name+"</a></h3>"
                + "<div class='btngroup'>"
                + "<a type='button' onclick=specialcart() class='add-to-cart btn btn-sm btn-secondary' title='Add to Cart' data-id=" + productdata[i].id + " data-name="+productdata[i].name+" data-price="+productdata[i].price+"></i> Add to cart</a>"
                + "</div>"


                + "</article>"
                + "</div>"
            }
        
        document.getElementById('products').innerHTML=output;
    }
</script>

I have a jquery function

$('.add-to-cart').click(function (event) {

    event.preventDefault();

    var name = $(this).data('name');
    console.log(name);
    var price = Number($(this).data('price'));
    console.log(price);
    shoppingCart.addItemToCart(name, price, 1);
    displayCart();
    $('.toast').toast('show');



});

By right, when i call this jquery event, my data will be added into a js array. I have tested it using a static button and it works. However, i notice my button in my js code above in the index.html which is calling my jquery event is not working (nothing is happening).

So my question is how do we call jquery event within my document.getElementById('products').innerHTML=output?

Notice: your js code `output +=` is missing closing semi-colonm ";" ..... — Stanley Amos, Sep 12 '20 at 17:57

score 0 · Answer 1 · answered Sep 12 '20 at 17:20

I think it's because .click won't work on dynamically added elements.

Try using .on('click',...) instead.

$('.add-to-cart').on('click', function (event) {
    event.preventDefault();

    var name = $(this).data('name');
    console.log(name);
    var price = Number($(this).data('price'));
    console.log(price);
    shoppingCart.addItemToCart(name, price, 1);
    displayCart();
    $('.toast').toast('show');
});

score 0 · Answer 2 · edited Sep 12 '20 at 17:52

I think you have to target your click listener through the document like so 

$(document).on('click', '.add-to-cart', function (event) {
   event.preventDefault();
   
   var name = $(this).data('name');
   console.log(name);
   var price = Number($(this).data('price'));
   console.log(price);
   shoppingCart.addItemToCart(name, price, 1);
   displayCart();
   $('.toast').toast('show');
});

How to call jQuery click event from innerHTML?

2 Answers2