jquery - 修改用于处理 jQuery 创建的 DOM 对象的脚本

Question

我有一个很好的功能，模拟“长按”

(function($) {
    $.fn.longClick = function(callback, timeout) {
        var timer;
        timeout = timeout || 500;
        $(this).mousedown(function() {
            timer = setTimeout(function() { callback(); }, timeout);
            return false;
        });
        $(document).mouseup(function() {
            clearTimeout(timer);
            return false;
        });
    };

})(jQuery);

$('#button').longClick(function(){ /* everything I want */ })

此代码适用于所有已存在的项目。
但是，如果我通过 jQuery 将此按钮添加到 DOM，则该脚本也无法正常工作。
此构造也不适用于 longClick，但可以正确使用“click”：

$(document).on('longClick',  "#button",function () {
        /* everything I want */
    });

我该如何解决？

谢谢！

===========
UPD

这是另一个代码，它适用于原始元素，但不适用于添加 jQuery，但它使用默认方法。

var pressTimer;    
$("#button").mouseup(function(){
  clearTimeout(pressTimer)
  return false;
}).mousedown(function(){
  pressTimer = window.setTimeout(function() {
         /* function */
  },500)
  return false; 
});

Answer 1

要使一些代码在未呈现的项目上工作（例如那些最初没有添加到 DOM 而是通过 jQuery 或其他方法添加的项目），您必须使用http://api.jquery.com/delegate/ ( .delegate( ) ) jQuery 的函数。所以不要这样做：

$('#button').on('longClick',  "#button",function () { ...

你需要做

$(document).delegate('#button', 'longclick', function() {...

希望能帮助到你！

编辑1：试试这样：

$(document).delegate('#button', 'mousedown', function(){
    clearTimeout(pressTimer)
    return false;
});
$(document).delegate('#button', 'mouseup', function(){
    pressTimer = window.setTimeout(function() { /* function */ },500);
    return false;
});

Answer 2

好的代码是：

var pressTimer
$(document).on("mouseup", "#button", function(){
       clearTimeout(pressTimer)
  // Clear timeout
  return false;
})
$(document).on("mousedown", "#button", function(){
       // Set timeout
  pressTimer = window.setTimeout(function() {
         /* MY SUPER FUNCTION */
  },500)
  return false; 
}  )