[英]click event without any response
i got an asp.net mvc project, but actually most of functions i achieved via javascript, below screenshot is the part which makes me frustrating, here you can see i use a date picker to define time slot then filter content for next dropdown button with related contents. 我有一个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>");
}
}
});
});
});
};
});
});
Ok now, everything is fine, content was added successfully with button tag, but now i want click on button to get data from server just like above action, it is very strange that click event doesn't work, i don't know why? 好的,现在一切都很好,内容已通过button标签成功添加,但是现在我想单击button就像上述操作一样从服务器获取数据,单击事件无法正常工作很奇怪,我不知道为什么? i did it in this way,
我是这样做的
@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>
}
i passed all instances from controller when i render page at very beginning, so that means all content already got, but only use jquery ajax to achieve kind of asynchronous. 我在刚开始呈现页面时从控制器传递了所有实例,因此这意味着所有内容都已获得,但仅使用jquery ajax实现某种异步。 if you confuse with why i used Razor to render scripts, ok, i tried javascript as well, but got same result.
如果您对为什么我使用Razor渲染脚本感到困惑,好的,我也尝试使用javascript,但是得到了相同的结果。
but one thing makes me shake was, when i run below code from console, it works fine. 但令我震惊的是,当我从控制台运行以下代码时,它工作正常。
$("#@item.ID").click(function () {
console.log('clicked');
});
Do not render inline scripts like that. 不要渲染这样的内联脚本。 Include one script and add a class name to the dynamically added elements and store the items ID as a
data-
attribute, then use event delegation to handle the click event 包括一个脚本并将类名称添加到动态添加的元素中,并将项目ID存储为
data-
属性,然后使用事件委托来处理click事件
In the datepickers .on
function 在
.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>");
Then use event delegation to handle the click event. 然后使用事件委托来处理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) {
....
});
});
Side note: Its not clear what your nested .each()
loops are trying to do and you are creating invalid html by adding <td>
elements direct to the table. 旁注:尚不清楚嵌套的
.each()
循环试图做什么,并且通过向表中直接添加<td>
元素来创建无效的html。 Best guess is that you want to add a new rows with 9 cells (and then start a new row) in which case it needs to be something like 最好的猜测是您想添加一个包含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);
})
Recommend also that you change 还建议您更改
url: "DataChanged?fromDate=" + $('#from-date').val() + "&toDate=" + $('#to-date').val(),
to 至
url: '@Url.Action("DataChanged")',
data: { fromDate: from, toDate: to }, // you already have the values - no need to traverse the DOM again
You are binding click event on every item ID but the way you are getting id is not right. 您在每个商品ID上绑定了点击事件,但是获取ID的方式不正确。 This
$("#@item.ID")
will not find any element because this will bind click to an element whose id is @item.ID
and there is no such element will this id. 此
$("#@item.ID")
找不到任何元素,因为这会将click绑定到其ID为@item.ID
的元素,并且没有此类元素。 You need to change it like below. 您需要像下面这样更改它。 Concatenate
"#"
with each item id. 将
"#"
与每个项目ID串联在一起。
$("#"+@item.ID).click(function () {
//your code
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.