Datatables and jQuery "on" method

Question

I am trying to create a dynamic table, which should display more information in another table as soon as on row is clicked on.

I'm doing this based on some code I've written a year ago, where I used the jQuery live method. As of now, this method does no longer exist and I switched to the on Method.

Now, the problem is, while this code actually triggers the creation of the Datatable, it won't bind the click event on the row. When I click on it, nothing happens at all.

This is the responsible Javascript code:

<script type="text/javascript">
$(document).ready(function() {
    $("#overview").dataTable({
        aoColumnDefs:[{
            sWidth: "20px",
            aTargets: [0]
        }],
        bLengthChange: false,
        oLanguage: {
            sProcessing:   "Bitte warten...",
            sLengthMenu:   "_MENU_ Einträge anzeigen",
            sZeroRecords:  "Keine Einträge vorhanden.",
            sInfo:         "_START_ bis _END_ von _TOTAL_ Einträgen",
            sInfoEmpty:    "0 bis 0 von 0 Einträgen",
            sInfoFiltered: "(gefiltert von _MAX_  Einträgen)",
            sInfoPostFix:  "",
            sSearch:       "Suchen",
            oPaginate: {
                sFirst:    "Erster",
                sPrevious: "Zurück",
                sNext:     "Nächster",
                sLast:     "Letzter"
            }
        },
        iDisplayLength: 10,
        sAjaxSource: "<%=ivy.html.startref("API/WebAPI/antraege.ivp")%>?asUid=<%=ivy.html.get("in.asUid")%>"
    });

    $(".dataset").on("click", function() {
        antragid = this.id;

        $.ajax({
            url: "<%=ivy.html.startref("API/WebAPI/antrag.ivp")%>",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: {
                id: antragid
            },
            success: function(data) {
                for (var key in data) {
                    $('#'+key).html(data[key]);
                }
            }
        })
    })
})
</script>

Now, because I'm using this on a workflow tool, which is working with templates, I can't put this code into the header (otherwise it would be loaded on every page which uses this template), so I'm forced to put it into the body tag, don't know if this might affect this problem.

Now, comes the strange part: When I copy the above code, and execute it in the Chrome JS console, it does create the event-bindings, so that the details will be put into the other table.

Am I doing something wrong? The application using the live method still works without a problem.

Thanks

bipen · Accepted Answer · 2013-03-21T10:15:46.487

2

you need to delegate the on event to closest static parent element.... for on click to work in dynamic added element

try this

 $(document).on("click",".dataset",function() {
 .....

delegating it to document works..but it is even more better if you can delegate it to closest parent (i guess that is #overview in your case) that is present in the document when click is called..

more about on() delegated event

edited Mar 21 '13 at 10:15

answered Mar 21 '13 at 10:08

bipen

36,319
9
49
62

1

The closest parent is probably the table : `$('#overview')`. For a simple explanation of event delegation, check also http://stackoverflow.com/questions/8110934 – LeGEC Mar 21 '13 at 10:14
yaaa.. i think that is closest static parent...thanks!! updated my answer – bipen Mar 21 '13 at 10:16

Datatables and jQuery "on" method

1 Answers1