时间戳

首页 > 解决方案 > 将自定义事件绑定到动态创建的元素

javascript - 将自定义事件绑定到动态创建的元素

问题描述

我一直在使用以下方法将事件绑定到动态创建的元素而没有任何问题：

$(document).on(event, element, function)

现在我想绑定一个自定义事件，但我无法让它工作。

该事件是一个处理单e双击的JS插件。如果我这样使用它：

$('#test').oneordoubleclick({
    oneclick: function () {
        alert('you have clicked this node.');
    },
    dblclick: function () {
        alert('you have double clicked this node.');
    }
});

它就像一个魅力，但是，当我转换代码以将事件绑定到动态创建的元素时，如下所示：

$(document).on('oneordoubleclick', '#test', {
    oneclick: function () {
        alert('you have clicked this node.');
    },
    dblclick: function () {
        alert('you have double clicked this node.');
    }
});

它停止工作！

它不应该工作？我究竟做错了什么？有可能做我想做的事吗？

标签： javascriptjquery

解决方案

根据我的理解，.oneordoubleclick不是一个事件，就像.footableor一样.tooltip。因此，您不能将其放入$(document).on("oneordoubleclick","#test", ...)

这是我的解决方案，借助插件源代码：

// Custom functions
let singleClick = function () { // your function when is single click
    alert('you have clicked this node.');
}

let doubleClick = function () { // your function when is double click
    alert('you have double clicked this node.');
}

// Necessary to differentiate is single or double click
let timer,
    do_click = function (e, fx) {
        clearTimeout(timer);
        timer = setTimeout(function () {
            fx();
        }, 400); // if there is no another click between 0.4s, then it is single click
    },
    do_dblclick = function (e, fx) {
        clearTimeout(timer); // the single click function will not be called
        fx();
    };

// Listener
$(document) .on("click",    "#test", function (e) { do_click(e, singleClick) })
            .on("dblclick", "#test", function (e) { do_dblclick(e, doubleClick) })

如我错了请纠正我。

推荐阅读