double click event doesnt work td content

Question

$("#btnClients").click(function () {
            var idx;
            var stable = $('#Tbody1').DataTable({
                "ajax": {
                    "url": '/home/selectCustomers',
                    "type": "get",
                    "datatype": "json",
                    "data": { "critere": txtcr, "ch": txtch },
                },
                "columns": [
                    {
                        "data": "code", "autoWidth": true, "render": function (data) {
                            idx = data;
                            return '<h6 id="' + data + '">' + data + '</h6>';
                        }
                    },
                ]
            });
        });
$(document).ready(function () {
        $("h6").dblclick(function () {
            alert("You have clicked this twice.");
        });
    });

I have some actions, which should occur on a double-click event on h6. However, I tried with this code but it doesnt work. Any other way than this is appreciated.

It would appear your table content is dynamically created so you might want to try **Carsten's** suggestion `$(document).on()` — NewToJS, Aug 13 '18 at 10:04

score 0 · Accepted Answer · answered Aug 13 '18 at 10:04

You need to use event delegation syntax for your event bindings as your h6 is dynamically created.

$('#Tbody1').on("dblclick", "h6", function () {
    alert("You have clicked this twice.");
});

You can delegate the event to the closest static parent or to document/body as these are available at the page load.

score 0 · Answer 2 · answered Aug 13 '18 at 10:04

0

The h6 element is dynamically added after the $(document).ready, so the eventhandler isn't being set.

You need to use $(document).on("dblclick","h6",function (...)); or to set the event after the h6 is added to the DOM.

answered Aug 13 '18 at 10:04

Programmer

1,973
1
12
20

double click event doesnt work td content

2 Answers2