Question

以下代码旨在搜索表格。我使用数据表jQuery，并尝试在使用内置过滤功能之前通过搜索来最小化导入记录的数量。

我的问题从第二次搜索开始。你可以从附图中看到，选择函数与数字函数调用成比例地发生。
任何想法为什么？

function srctbl() {
    $("#RegSrc").dataTable().fnDestroy();
    var RegSrctbl = $('#RegSrc').DataTable({
        select: true,
        scrollY: 200,
        deferRender: true,
        scroller: true,
        rowId: 'Filenum',
        //"processing": false,
        //"serverSide": false,
        "ajax": {
            contentType: "application/json; charset=utf-8",
            url: "../CONFIG/WebSerTblsSearch.asmx/SrcTblReg",
            type: "Post",
            data: function (dtParms) {
                return JSON.stringify({
                    SrchTxt: $('#srctxt').val(),
                    FnameSrctxt: $('#fnamesrc').val(),
                    SnameSrctxt: $('#snamesrc').val(),
                    TnameSrctxt: $('#tnamesrc').val(),
                    LnameSrctxt: $('#lnamesrc').val(),
                    TelSrcTxt: $('#telsrc').val(),
                    SSNSrcTxt: $('#ssnsrc').val(),
                    EmailSrctxt: $('#emailsrc').val(),
                    DOBSrcTxt: $('#dobsrc').val()
                });
            },
            dataFilter: function (res) {
                var parsed = JSON.parse(res);
                var morp = JSON.parse(parsed.d);
                return JSON.stringify({ data: morp });
            },
            error: function (x, y) {
                console.log(x);
            }
        },
        deferRender: true,
        columns: [
            { data: "Filenum" },
            { data: "FullName" },
            { data: "DOB" }
        ],
        select: {
            style: 'single',
            blurable: true
        },
    });
    $("#RegSrc").on("click", "tr", function () {
        console.log($(this).children(":first").text());
        $("#trgtval").val(($(this).children(":first").text()))
    });
}

console.log()显示第一次函数调用后每个选择的事件触发次数

Answer 1

您遇到的问题是附加到 static 元素的click事件处理程序是在多次调用的函数范围内注册的。
基本上只需单击tr元素，就会多次触发srctbl()。

即使您为动态创建的click元素注册tr，您也会将该事件附加到#RegSrc表格 - 它是event delegation

将click事件处理程序移到外面：

function srctbl() {
    //...
}

$("#RegSrc").on("click", "tr", function () {
    console.log($(this).children(":first").text());
    $("#trgtval").val(($(this).children(":first").text()))
});

datatable jQuery行选择值输出

1 个答案: