Question

这是我在StackOverFlow上的第一个条目。我正在处理一个项目，它需要jQuery来执行主/详细表格布局。我必须在asp.net C＃中工作，master和detail表动态生成。那我的问题是什么：我使用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();
                    }
                });
            }
        });
    };

在tablefunctions.aspx中有一个条目，生成提交按钮：

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

所以问题从这里开始。每当我在主表中询问新的详细信息行时，都会创建一个新的submitMasterData按钮实例，并在每个先前的值上触发$(document).on('click', '#submitMasterData', function ()事件。如果我重新加载页面，第一个详细信息请求是正常的，但＆＃34;集合＆＃34;再次开始。 $("#submitMasterData").remove();没有解决问题。对不起，我的英语不好，如果不清楚，请问我......

Answer 1

问题是specified field函数在每次单击按钮时绑定一个新事件，而不删除任何先前的事件。您可以使用$(document).on()函数删除队列中的旧函数。

off()

您可以在此JS小提琴中查看概念证明：https://jsfiddle.net/bfc6wzt8/

希望有所帮助： - ）

删除动态创建的按钮的历史记录 - jQuery

1 个答案: