asp.net-mvc - 停止 jQuery 双重绑定(bind)点击事件(最佳实践)

Question

这是我的问题。

我正在使用 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)点击事件，从而使其不会建立点击事件，但我认为这不是最佳实践。

我该怎么做？

Answer 1

您可以绑定(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，这比任何其他选择器要快得多......因为它们必须是唯一的，实际上不需要在选择器中包含父级或任何其他信息:)