jquery Link click in Datatables not working

Question

I'm using the jquery datatables plugin and I have two links in the first row. Those links are used to send a ajax on click. Since I implemented datatables (I had just a table beforehand) it stopped working. I've looked around and tried two things:

I originally had

               $(".approveReject").click(function () {
                   OnApproveRejectClick("voavi", this);
               });

But replaced that with

$(document).delegate("click", '.approveReject', function (event) {
alert("clicked");
});

with no success, so I tried to add the fnInitComplete callback to the datatable init object:

        "fnInitComplete": function () {
            $(".approveReject").click(function () {
                OnApproveRejectClick("voavi", this);
            });
        }

still nothing. The click doesn't work at all. Any idea what I need to do in order to bind the click event to my links? Thanks

Full datatable init

    $("#voaviTable").dataTable({
        "bJQueryUI": true,
        "bScrollInfinite": true,
        "bScrollCollapse": true,
        "iDisplayLength": 30,
        "sScrollY": "450px",
        "oLanguage": {
            "sSearch": "Filter: "
        },
        "aaSorting": [],
        "fnInitComplete": function () {
            $(".approveReject").click(function () {
                OnApproveRejectClick("voavi", this);
            });
        }
    });

table example row:

<tr class="even">
<td class=" ">
<a id="lnkApprove" class="approveReject" href="#">Approve</a>
|
<a id="lnkReject" class="approveReject" href="#">Reject</a>
<span class="ui-icon ui-icon-circle-check" style="display: none;"></span>
<span class="ui-icon ui-icon-circle-close" style="display: none;"></span>
<img id="loaderGif" height="16px" style="display: none;" src="../../Content/images/loader.gif">
</td>
<td class="statusID "> 32 </td>
<td class="statusText "> new </td>
<td class=" "> </td>
<td class=" "> </td>
<td class=" "> Cote de Blancs </td>
<td class=" "> </td>
<td class=" "> </td>
<td class=" ">
<td class=" "> 10/5/2012 2:54:05 PM </td>
</tr>

Looks like the handler is being bound multiple times to the same event — Sushanth --
– Sushanth --, Commented Oct 5, 2012 at 20:06

wirey00 · Accepted Answer · 2012-10-05 20:07:54Z

4

You are using delegate wrong

$(document).delegate( '.approveReject', "click",function (event) {// <-- notice where the selector and event is
    alert("clicked");
});

Though if you are using jQuery 1.7+ use .on()

$(document).on("click", '.approveReject', function (event) {
    alert("clicked");
});

best thing would to bind the event to your table though as it's the closest static parent element (I'm guessing)

$('#voaviTable').on('click','.approveReject', function (event) {

$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+

$(document).on(events, selector, data, handler); // jQuery 1.7+

answered Oct 5, 2012 at 20:07

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

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

1 Comment

user576838 Over a year ago

Thanks man! I know I should be using on, but I don't have time the change jquery and test everything. Your solution worked! Thanks

Collectives™ on Stack Overflow

jquery Link click in Datatables not working

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related