Delegated function inside ready function

Question

I am using DataTables plugin with hidden rows, when using pagination, my click event fails without console error.

This is the function:

$(document).ready(function() {

$('#datatable tbody td a').on('click', function (e) {
    e.preventDefault();
    var nTr = $(this).parents('tr')[0];
    if ( oTable.fnIsOpen(nTr) ) {
        /* This row is already open - close it */
        $(this).addClass('glyphicon-arrow-down');
        $(this).removeClass('glyphicon-arrow-up');
        oTable.fnClose( nTr );
    } else {
        /* Open this row */
        $(this).addClass('glyphicon-arrow-up');
        $(this).removeClass('glyphicon-arrow-down');
        oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
    }
});

});

As you can see i am using delegation, but the function is wrapped in a ready function. I'm certain this is the problem. How do i fix this?

The above question was asked in error, please see my comment under the answer.

you are not using event delegation!!! just using `on` to register does not make delegated event handling — Arun P Johny, Oct 26 '13 at 16:33
$('#datatable tbody td a').on('click', function (e) {} is delegation? — Edward, Oct 26 '13 at 16:33
no it is not, but `$('#datatable').on('click', 'tbody td a', function (e) {});` is delegated click handling — Arun P Johny, Oct 26 '13 at 16:34
@Edward: No. `$("#datatable tbody").on("click", "td a"), ...)` would be delegation. — T.J. Crowder, Oct 26 '13 at 16:34
See [this post](http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht/8752376#8752376) for info on how delegation works with `.on()`. As others have said, you are not using delegation. — jfriend00, Oct 26 '13 at 16:36

score 2 · Accepted Answer · answered Oct 26 '13 at 16:35

2

Read .on()

As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.

$('#datatable').on('click', 'tbody td a', function (e) {});

Syntax

$( elements ).on( events, selector, data, handler );

Below code is not Event Delegation

$('#datatable tbody td a').on('click', function (e) {

answered Oct 26 '13 at 16:35

Tushar Gupta - curioustushar

58,085
24
103
107

This is correct, the question i asked wasn't necessary i didn't take the time to look at the syntax before asking. If it helps the community differentiate the syntax i don't mind leaving this mistake available. – Edward Oct 26 '13 at 17:26
1

@Edward Leave this question as it is So that it will help somebody someday . – Tushar Gupta - curioustushar Oct 26 '13 at 17:28

Delegated function inside ready function

1 Answers1