stop jQuery double-binding click event (best practice)

Question

Hi guys

here is my problem.

I'm using MVC and in a lot of Index Views i have a 'Delete' button/logo with a URL. So I wanted to make this delete function work with jQuery and AJAX.

my button:

<a class="delbtn" href='<%= Url.Action("Delete", new {id=item.Vrst_ID}) %>'>
                        <img src="<%= Url.Content("~/img/cancel.png") %>" alt="Delete" width="16" /></a>

the jQuery code per page:

        <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>

the code in the js file which is included.

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();

}

Basically this works, but the second time i delete something, the $.post gets executed twice, because the click function is added to the $("#delmodal #btnJa") twice.

so i wanted to separate those Yes and No button (from the deletemodal) but in the 'Yes' button (#btnJa) i need the handler to take its URL.

To fix this, i was thinking to Unbind the click event after use, and thus make it not build up the click events, but i think this is not best practice.

how should i do it?

Answer 1

Instead of unbinding/rebinding you can bind the buttons once and just store the handler.href which is all that's changing somewhere else, for example using $.data() and .data() like this:

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

This binds the click handlers only once, and when you call deleteConfirmation we store the handler.href on #btnJa has a data property, so every time you click another .delete it'll update which page the $.post() goes to.

One other optimization here is if an element has an ID use only #ID in the selector, this is much faster than any other selector...since they must be unique, there's no need to include a parent or any other information in the selector really :)