javascript - 在动态创建的 HTML 上添加 onclick 事件导致错误 : Uncaught SyntaxError: Unexpected identifier

Question

我正在使用 ajax 从后面的代码中获取结果，当我获取这些结果时，我正在创建一个 div。这工作正常，动态添加一个 div。

现在我想在每个 div onclick 事件上添加它应该在单击时引发一些方法，所以这是我的完整代码:

<script>
    function onSelectGroup(Id) {
        $.ajax({
            method: "GET",
            url: "Product/GetProductsByGroupId",
            data: { groupId: Id }
        })
.done(function (response) {

    $(".products").html("");
    for (var i = 0; i < response.length; i++) {
//I wrote onclick = "addProduct(response[i])" to generate for each div each onclick event
        let item = '<div class="col-md-3"> <div class="Product-holder" onclick="addProduct(' + response[i] + ')" id=' + response[i].ProductId + '><img class="img-responsive" src="images/maxresdefault.jpg"><p class="product-title" style="color:white;margin-top:5px;text-align:center;"> ' + response[i].Title + '</p></div></div>';
        //Trying to append it to my .product class because it's parent of this divs above
        $(".products").append(item);

    }})};

    function addProduct(product) {
        console.log(product.Title);
    }
</script>

但是当我点击我生成的任何 div 时，我收到以下错误:

Uncaught SyntaxError: Unexpected identifier

我一直在寻找 3 小时的问题，但我真的被困在这里了..

任何形式的帮助都会很棒。谢谢

附言

代码隐藏 - C# 方法:

public ActionResult GetProductsByGroupId(int groupId)
{
            var products = ProductController.GetProductsByGroupId(groupId);
            if(products)
            {
                List<Product> productlist = new List<Product>();
                foreach (var item in products)
                {
                    Product product = new Product();
                    product.ProductId = Convert.ToInt32(item.Id);
                    product.Price = Convert.ToDecimal(item.Price);
                    product.Title = item.Title;
                    productlist.Add(product);
                }

                return Json(productlist, JsonRequestBehavior.AllowGet);
            }

            return Json(products, JsonRequestBehavior.AllowGet);
}

Answer 1

删除onclick 并使用delegate ，您正在将对象传递给将 response[i] 转换为文本 [Object object] 的函数，请使用 data-*属性来保存每个对象的数据，并将事件附加到具有类 product 的 div，在单击 div 时，我们将使用 $(this) 来引用当前单击 div 并访问其 data 属性。

$(".products").html("");
 var response = [{ProductId:4, Title:"Doe", Price: 34.89}, {ProductId:6, Title:"Jane", Price: 20.99}];
    for (var i = 0; i < response.length; i++) {
//I wrote onclick = "addProduct(response[i])" to generate for each div each onclick event
        let item = '<div class="col-md-3"> <div class="Product-holder product" data-price="'+ response[i].Price +'" data-title="' + response[i].Title + '" id=' + response[i].ProductId + '><img class="img-responsive" src="images/maxresdefault.jpg"><p class="product-title" style="color:white;margin-top:5px;text-align:center;"> ' + response[i].Title + '</p></div></div>';
        //Trying to append it to my .product class because it's parent of this divs above
        $(".products").append(item);
//console.log(item);
    };
    
$(document).on('click', '.product', function(){
  var product = {Title: $(this).data('title'), ProductId: $(this).attr('id'), Price: $(this).data('price')};
  console.log(product);
  // here use ajax to add this product
});

body {
background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="products"></div>