Remove dynamically created button's history - jQuery

Question

this is my first entry on StackOverFlow. I'm working on a project and it needs jQuery to perform a master/detail table layout. I have to work in asp.net C#, master and detail table generate dynamically. So what is my problem: I generate the master table with ajax:

        function refreshMasterTable() {
        xhr = $.ajax({
            type: "GET",
            url: "tablefunctions.aspx?mode=showmastertable",
            success: function (html) {
                $("#tbl_master").html(html);
                prevAjaxReturned = true;
                $('input[type=button]').click(function () {
                    var bid, trid;
                    bid = (this.id);
                    trid = $(this).closest('tr').attr('id');
                    if ($("#detail_" + trid).length == 0) {
                        detailShow = true;
                        pointer = $(this).closest('tr');
                        pointer.after("<tr><td colspan=5><div id=detail_" + trid + "></div></td></tr>");
                        $.get("tablefunctions.aspx?mode=showdetailtable&id=" + trid, function (response) {
                            $('#detail_' + trid).html(response);
                        });
                        $(document).on('click', '#submitMasterData', function () {
                            value = $('#name').val();
                            $.get("tablefunctions.aspx?mode=mastertableupdate&id=" + trid + "&name=" + value);
                            refreshMasterTable();
                        });
                    } else {
                        detailShow = false;
                        $(this).closest('tr').next("tr").remove();
                    }
                });
            }
        });
    };

In tablefunctions.aspx there is an entry, what generates the submit button:

html.Append("<tr><td colspan=\"2\" align=\"right\"><input type=\"submit\" id=\"submitMasterData\" /></td></tr>");

So the problem begins here. Each time when I ask a new detail row in the master table, a new submitMasterData instance of button creates and the $(document).on('click', '#submitMasterData', function () event triggers on every previous values. If I reload the page, the first detail request is OK, but the "collection" begins again. $("#submitMasterData").remove(); didn't solve the problem. Sorry for my bad English, if something is not clear, please ask me...

Answer 1

The problem is the $(document).on() function is binding a new event each time a button is clicked without removing any of the previous events. You can use the off() function to remove the old ones in queue.

function refreshMasterTable() {
    xhr = $.ajax({
        type: "GET",
        url: "tablefunctions.aspx?mode=showmastertable",
        success: function (html) {
            $("#tbl_master").html(html);
            prevAjaxReturned = true;
            $('input[type=button]').click(function () {
                var bid, trid;
                bid = (this.id);
                trid = $(this).closest('tr').attr('id');
                if ($("#detail_" + trid).length == 0) {
                    detailShow = true;
                    pointer = $(this).closest('tr');
                    pointer.after("<tr><td colspan=5><div id=detail_" + trid + "></div></td></tr>");
                    $.get("tablefunctions.aspx?mode=showdetailtable&id=" + trid, function (response) {
                        $('#detail_' + trid).html(response);
                    });
                    //need to unbind all the previously attached events
                    $(document).off('click', '#submitMasterData');
                    $(document).on('click', '#submitMasterData', function () {
                        value = $('#name').val();
                        $.get("tablefunctions.aspx?mode=mastertableupdate&id=" + trid + "&name=" + value);
                        refreshMasterTable();
                    });
                } else {
                    detailShow = false;
                    $(this).closest('tr').next("tr").remove();
                }
            });
        }
    });
};

You can view a proof of concept in this JS fiddle: https://jsfiddle.net/bfc6wzt8/

Hope that helps :-)