双击事件不起作用td内容

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.");
        });
    });

我有一些动作，应该在h6的双击事件上发生。但是，我尝试使用此代码，但是它不起作用。除此以外的任何其他方式都值得赞赏。

Answer 1

在动态创建h6时，需要为事件绑定使用事件委托语法。

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

您可以将事件委托给最接近的静态父对象 ，也可以委托给 document / body 在页面加载时。

Answer 2

h6元素是在$(document).ready之后动态添加的，因此未设置eventhandler。

将$(document).on("dblclick","h6",function (...));添加到DOM后，您需要使用h6或设置事件。