这是我的问题。
我正在使用 MVC,并且在很多索引 View 中我都有一个带有 URL 的“删除”按钮/ Logo 。所以我想让这个删除功能与 jQuery 和 AJAX 一起使用。
我的按钮:
<a class="delbtn" href='<%= Url.Action("Delete", new {id=item.Vrst_ID}) %>'>
<img src="<%= Url.Content("~/img/cancel.png") %>" alt="Delete" width="16" /></a>
每页的 jQuery 代码:
<script type="text/javascript">
$(document).ready(function () {
$(".delbtn").click(function () {
var msg = "set " + $(this).parent().parent().find(".vrsttitel").text() + " ";
deleteConfirmation(msg, this);
return false;
});
});
</script>
包含的js文件中的代码。
function deleteConfirmation(msg, handler) {
var showIt = function (hash) {
hash.w.find("#modaltekst").text(msg);
$("#delmodal #btnJa").click(function () {
$("#delmodal").jqmHide();
setHighlight("Verwijderen...");
$.post($(handler).attr("href"), null, function (data) {
if (data.succes) {
setHighlightOK("Verwijderd");
$(handler).parent().parent().fadeOut("slow");
} else {
if (data.error != "") {
setError(data.error);
} else {
setError("Verwijderen mislukt.");
}
}
}, "json");
});
$("#delmodal #btnNee").click(function () {
$("#delmodal").jqmHide();
});
$("#delmodal").show();
return false;
};
$("#delmodal").jqm({ onShow: showIt }).jqmShow();
}
基本上这是可行的,但是当我第二次删除某些内容时,$.post 被执行两次,因为点击函数被添加到 $("#delmodal #btnJa") 两次。
所以我想将那些"is"和“否”按钮(与删除模式)分开,但在"is"按钮(#btnJa)中,我需要处理程序获取其 URL。
为了解决这个问题,我正在考虑在使用后取消绑定(bind)点击事件,从而使其不会建立点击事件,但我认为这不是最佳实践。
我该怎么做?
最佳答案
您可以绑定(bind)按钮一次,然后只存储 handler.href
,而不是取消绑定(bind)/重新绑定(bind),这就是其他地方发生的所有更改,例如使用 $.data()
和 .data()
像这样:
$("#btnJa").click(function () {
$("#delmodal").jqmHide();
setHighlight("Verwijderen...");
var handler = $.data(this, 'handler');
$.post(handler.attr('href'), function (data) {
if (data.succes) {
setHighlightOK("Verwijderd");
handler.parent().parent().fadeOut("slow");
} else {
if (data.error != "") {
setError(data.error);
} else {
setError("Verwijderen mislukt.");
}
}
}, "json");
});
$("#btnNee").click(function () {
$("#delmodal").jqmHide();
});
function deleteConfirmation(msg, handler) {
var showIt = function (hash) {
hash.w.find("#modaltekst").text(msg);
$("#btnJa").data('handler', $(handler));
$("#delmodal").show();
return false;
};
$("#delmodal").jqm({ onShow: showIt }).jqmShow();
}
这只会绑定(bind)一次 click
处理程序,当您调用 deleteConfirmation
时,我们会将 handler.href
存储在 #btnJa
有一个 data 属性,因此每次您单击另一个 .delete
时,它都会更新 $.post()
转到的页面。
这里的另一个优化是,如果一个元素有一个 ID,仅在选择器中使用 #ID
,这比任何其他选择器要快得多......因为它们必须是唯一的,实际上不需要在选择器中包含父级或任何其他信息:)
关于asp.net-mvc - 停止 jQuery 双重绑定(bind)点击事件(最佳实践),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3529741/