如何从innerHTML调用jQuery click事件？

如何解决如何从innerHTML调用jQuery click事件？

在我的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函数

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



});

好的，当我调用此jquery事件时，我的数据将添加到js数组中。我已经使用静态按钮对其进行了测试，并且可以正常工作。但是，我注意到上面index.html中的js代码中的按钮正在调用我的jquery事件，该按钮不起作用（什么都没有发生）。

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

解决方法

我认为这是因为 .click 不适用于动态添加的元素。

尝试使用 .on（'click'，...）。

$('.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,1);
   displayCart();
   $('.toast').toast('show');
});