点击事件，没有任何回应

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