動的に作成されたHTMLにonclickイベントを追加すると、エラーが発生しました:Uncaught SyntaxError:予期しない識別子

billy_56

私は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のいずれかをクリックすると、次のエラーが発生します。

キャッチされないSyntaxError:予期しない識別子

私はすでに3時間の問題を探しています、そして私は本当にここで立ち往生しています。

どんな種類の助けも素晴らしいでしょう。ありがとう

PS

コードビハインド-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);
}
6月L。

を削除してデリゲートonclickを使用します。オブジェクトをテキスト変換する関数に渡し、data- *属性を使用して各オブジェクトのデータを保持し、クラスを使用してdivにイベントをアタッチします。使用するdivをクリックします。現在クリックされているdivを参照し、その属性にアクセスします。response[i][Object object]product$(this)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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ