Javascript 如何从innerHTML调用jQuery单击事件？

在index.html中加载的javascript中，我从后端（Flask应用程序）获取数据，并输入javascript变量。我这样做的原因是，虽然我可以使用{%data%}直接从烧瓶端注入并执行for循环，但我希望对数据进行动态过滤。为此，我没有总是从服务器获取，而是将其加载到javascript对象中

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>

在右边，当我调用这个jquery事件时，我的数据将被添加到一个js数组中。我用一个静态按钮对它进行了测试，它可以正常工作。但是，我注意到上面index.html中js代码中调用jquery事件的按钮不起作用（没有发生任何事情）

所以我的问题是如何在我的文档中调用jquery事件。getElementById（'products'）。innerHTML=output？

我认为这是因为。单击对动态添加的元素无效

尝试改用.on（'click'，…）来代替

---

注意：您的js代码

输出+=

缺少结束分号“；”。。。。。

$('.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');



});

$('.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');
});

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