點擊事件，沒有任何回應

Question

我有一個asp.net mvc項目，但實際上我通過javascript實現的大多數功能，下面的截圖是讓我感到沮喪的部分，在這里您可以看到我使用日期選擇器定義時間段，然后使用下一個下拉按鈕過濾內容相關內容。

 $('.input-daterange').datepicker({
                    format: "yyyymm",
                    minViewMode: 1,
                    language: "zh-CN",
                    beforeShowMonth: function (date) {
                        switch (date.getMonth()) {
                            case 0:
                                return false;
                            case 1:
                                return false;
                            case 2:
                                return false;
                            case 3:
                                return false;
                            case 4:
                                return false;

                        }
                    }
                }).on('changeDate', function (e) {
                    var from = $('#from-date').val();
                    var to = $('#to-date').val();
                    if (from !== to) {
                        $.ajax({
                            type: "GET",
                            url: "DataChanged?fromDate=" + $('#from-date').val() + "&toDate=" + $('#to-date').val(),
                            dataType: "json"
                        })
                            .done(function (data) {
                                //var legth = data.chart.length;
                                $('#brandtable').empty();
                                var contents = $.parseJSON(data);
                                $.each(contents, function (key, values) {
                                    $.each(values, function (k, v) {
                                        $('#brandtable').append("<td><button class='btn btn-default' id=" + v.ID + ">" + v.BrandName + "</button></td>");

                                        if (k % 9 === 0) {

                                            if (k !==0) {
                                                $('#brandtable').append("<tr></tr>");
                                            }
                                        }
                                    });

                                });


                            });

                    };


                });




        });

好的，現在一切都很好，內容已通過button標簽成功添加，但是現在我想單擊button就像上述操作一樣從服務器獲取數據，單擊事件無法正常工作很奇怪，我不知道為什么？ 我是這樣做的

 @foreach (var item in Model)
                {
                    <text>
                          $("#@item.ID").click(function () {
                              $.getJSON("@Url.Action("ReturnContentForSrpead", new { @ID = item.ID })", function (msg) {
                                  var tags = BID.getParams.C32().tags;
                                  var data = (msg.data || {}).wordgraph || [{ key: tags[0] }, { key: tags[1] }, { key: tags[2] }, { key: tags[3] }, { key: tags[4] }];
                                  iDemand.drawBg().setData(data[lastTab]).drawCircle(BID.getColor(lastTab)).wordgraph = data;
                              });

                          });
                    </text>
                }

我在剛開始呈現頁面時從控制器傳遞了所有實例，因此這意味着所有內容都已獲得，但僅使用jquery ajax實現某種異步。 如果您對為什么我使用Razor渲染腳本感到困惑，好的，我也嘗試使用javascript，但是得到了相同的結果。

但令我震驚的是，當我從控制台運行以下代碼時，它工作正常。

  $("#@item.ID").click(function () {
             console.log('clicked');                  

                          });

Answer 1

不要渲染這樣的內聯腳本。 包括一個腳本並將類名稱添加到動態添加的元素中，並將項目ID存儲為data-屬性，然后使用事件委托來處理click事件

在.on函數中

var table = $('#brandtable'); // cache it

$.each(values, function (k, v) {
  // Give each cell a class name and add the items ID as a data attribute
  table .append("<td><button class='btn btn-default brand' data-id="v.ID>" + v.BrandName + "</button></td>");

然后使用事件委托來處理click事件。

var url = '@Url.Action("ReturnContentForSrpead")';
table.on('click', '.brand', function() {
  // Get the ID
  var id = $(this).data('id');
  $.getJSON(url, { ID: id }, function (msg) {
     ....
  });
});

旁注：尚不清楚嵌套的.each()循環試圖做什么，並且通過向表中直接添加<td>元素來創建無效的html。 最好的猜測是您想添加一個包含9個單元格的新行（然后開始一個新行），在這種情況下，它需要像

$.each(values, function (k, v) {
  if (k % 9 === 0) {
    var row = $('</tr>');
    table.append(row);
  }
  var button = $('</button>').addClass('btn btn-default brand').data('id', v.ID).text(v.BrandName);
  var cell = $('</td>').append(button);
  row.append(cell);
})

還建議您更改

url: "DataChanged?fromDate=" + $('#from-date').val() + "&toDate=" + $('#to-date').val(),

至

url: '@Url.Action("DataChanged")',
data: { fromDate: from, toDate: to }, // you already have the values - no need to traverse the DOM again

Answer 2

您在每個商品ID上綁定了點擊事件，但是獲取ID的方式不正確。 此$("#@item.ID")找不到任何元素，因為這會將click綁定到其ID為@item.ID的元素，並且沒有此類元素。 您需要像下面這樣更改它。 將"#"與每個項目ID串聯在一起。

$("#"+@item.ID).click(function () {
//your code
})