Jquery 函数被调用两次答案

【问题标题】：Jquery functions are called twiceJquery 函数被调用两次
【发布时间】：2020-05-03 11:47:23
【问题描述】：

已编辑

我正在单击 jqwidget 网格列中的链接时打开一个模式，我正在使用单元格渲染器来完成此操作。但数据呈现两次。下面是点击打开modal后的截图。

$(document).ready(function () {
   var loadGrid = function (fromDate = null, toDate = null) {
    $.ajax({
        url: "/Home/SearchResults",
        dataType: 'json',
        beforeSend: function () {
            $("jqxgrid").html('');
        },
        error: function (json, textStatus, errorThrown) {
            alert(' Error :' + errorThrown);
        },
        data: {
            fromdate: fromDate,
            toDate: toDate
        },
        success: function (response) {
            // initailize grid
            var gridData = response;
            window.searchData = response.SearchResults;
            var gridSource =
            {
                localdata: gridData,
                datatype: 'json'
            };
            var gridDataAdapter = new $.jqx.dataAdapter(gridSource);

            $("#jqxgrid").jqxGrid(
                {
                    width: 1500,
                    source: gridDataAdapter,
                    pageable: true,
                    autoheight: true,
                    pagesize: 20,
                    selectionmode: 'singlecell',
                    columns: [
                        { text: 'Edit', datafield: 'Edit', width: 250, columntype: 'button', cellsrenderer: function () {
                                return `<a href='' data-toggle='modal' data-target='#JsonModal'  id='elem' /> Get Json`},
                            buttonclick: function (row) {
                                                 editrow = row;
                                                 var offset = $("#jqxgrid").offset();
                                                 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                                                 selectedFirstName = dataRecord.FirstName;
                            }
                        }
                    ]
                });
        }
    });
}
$(document).on("hidden.bs.modal", "#JsonModal", function () {
    $(this).find("#modal-content").html(""); // just clear the contents.
    $(this).find("#modal-content").remove(); // remove from dom.
});

$('#JsonModal').on('shown.bs.modal', function () {
    $('#JsonModal').find('.modal-body').append('<div id="modal-content">' + selectedFirstName + '</div> ');
});
});

更新：

正如一些评论者所指出的，我注意到我的 jquery 函数被调用了两次。

 $(document).on('click', 'a[id^="elem"]', function () {
        alert('hello');
    });

一个警告框打开被打开两次。我不清楚为什么。

【问题讨论】：

如果您多次打开模态框，是否每次都会出现另一个test？另请注意，您附加的字符串中不需要字符串连接
不，我在关闭后清除它，它始终呈现两次。我有其他（敏感）数据用于字符串连接:)。
#JsonModal 中是否有多个 .modal-body 元素？
否，但似乎正在渲染两个 id = modal-content 的 div。
shown.bs.modal 处理程序代码是否有可能被执行两次？

标签： jquery twitter-bootstrap bootstrap-modal jquery-widgets

【解决方案1】：

检查您的页面以确保您没有在页面上包含两次 jQuery。

这是一个非常常见的错误，可能会导致您在问题中描述的事件被调用/呈现两次的问题。

【讨论】：

【解决方案2】：

使用 unbind()。

$(document).unbind().on('click', 'a[id^="elem"]', function () {
    alert('hello');
});

希望这会有所帮助。

【讨论】：