Question

这是我的问题。

我正在使用MVC，在很多索引视图中，我有一个带有URL的“删除”按钮/徽标。所以我想让这个删除功能与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会被执行两次，因为click函数被添加到$（“＃delmodal #btnJa”）两次。

所以我想分开那些Yes和No按钮（来自deletemodal）但是在'Yes'按钮（#btnJa）中我需要处理程序来获取它的URL。

为了解决这个问题，我想在使用后取消绑定点击事件，从而使它不会构建点击事件，但我认为这不是最佳做法。

我应该怎么做？

Answer 1

您可以绑定按钮一次，而不是解除绑定/重新绑定，只需存储handler.href即可在其他地方更改的内容，例如使用$.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();
}

这只会绑定click个处理程序一次，当您致电deleteConfirmation时，我们将handler.href存储在#btnJa上有一个数据属性，所以每次点击另一个.delete { {1}}它会更新$.post()转到的页面。

这里的另一个优化是，如果一个元素在选择器中只使用 #ID的ID，这比任何其他选择器快得多...因为它们必须是唯一的，所以不需要在选择器中包含父级或任何其他信息：）

停止jQuery双绑定点击事件（最佳实践）

1 个答案: