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/（。devgate（））函数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; 
}  )

修改脚本以使用jQuery创建的DOM对象

2 个答案: