datatable jQuery row selection value output

Question

The code below is designed to search in a table. I'm using datatable jQuery and I'm trying to minimize the number of imported records by searching before using the built in filtering feature.

My problem starts with the second search onwards. you can see from the attached image that select function fires proportionally with the number function calls.
Any idea why?

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() showing number of event fires with each selection after the first function call

try $("#RegSrc").off('click').on("click", ....

Rohith K P
– Rohith K P

2017-04-29 08:33:26 +00:00
Commented Apr 29, 2017 at 8:33 — Rohith K P
– Rohith K P, Commented Apr 29, 2017 at 8:33
did not work, sorry

JSON
– JSON

2017-04-29 08:43:36 +00:00
Commented Apr 29, 2017 at 8:43 — JSON
– JSON, Commented Apr 29, 2017 at 8:43
srctbl() is bound to a button click function

JSON
– JSON

2017-04-29 08:44:23 +00:00
Commented Apr 29, 2017 at 8:44 — JSON
– JSON, Commented Apr 29, 2017 at 8:44

Artur Filipiak · Accepted Answer · 2017-04-29 09:31:04Z

1

The problem you're facing is that the click event handler attached to static element is registered within a scope of a function which is called more than once.
Basically a single click on a tr element will fire as many times, as many times the srctbl() was called.

Even you register click for dynamically created tr elements, You're attaching that event to the #RegSrc table - it's an event delegation

Move click event handler outside:

function srctbl() {
    //...
}

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

edited Apr 29, 2017 at 9:31

answered Apr 29, 2017 at 9:24

Artur Filipiak

9,1874 gold badges33 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

datatable jQuery row selection value output

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related