Question

我有一个asp.net mvc项目，但实际上我通过javascript实现的大多数功能，截图下面的部分让我感到沮丧，在这里你可以看到我使用日期选择器来定义时隙然后过滤下一个内容带有相关内容的下拉按钮。

enter image description here

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

                                });


                            });

                    };


                });




        });

现在好了，一切都很好，内容已成功添加按钮标签，但现在我想点击按钮从服务器获取数据就像上面的动作一样，很奇怪点击事件不起作用，我不知道为什么？我是这样做的，

 @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事件

在datepickers .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不存在此类元素。你需要改变它，如下所示。将"#"与每个项目ID连接起来。

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

点击事件，没有任何回复

2 个答案: