在jquery中使用.on时需要帮助，以便它也可以处理动态数据

Need help in using .on in jquery so that it can work with dynamic data also

本文关键字：也可以 数据 动态 处理 帮助 jquery on      更新时间：2023-09-26

我有一个函数"single_double_click"，我通过$('#packagelisttable tr').single_double_click(fn)调用它，它适用于静态数据。

但是，当我部署相同的应用程序来处理动态数据时，它没有响应。我也尝试使用.on，如几篇帖子中所述，但也没有成功。请在下面找到相同的内容：

  1. $(#packagelisttable ).on('single_double_click', 'tr', fn)
  2. $(document).on('single_double_click', 'packagelisttable tr', fn)

我需要单击一行表格(#packagelisttable(，并且需要检查它是单击还是双击。

请找到我正在使用的代码：

jQuery.fn.single_double_click = function (single_click_callback, double_click_callback, timeout) {
    return this.each(function () {
        var clicks = 0,
            self = this;
        jQuery(this).click(function (event) {
            clicks++;
            if (clicks == 1) {
                setTimeout(function () {
                    if (clicks == 1) {
                        single_click_callback.call(self, event);
                    } else {
                        double_click_callback.call(self, event);
                    }
                    clicks = 0;
                }, timeout || 300);
            }
        });
    });
}
//$(#packagelisttable ).on('single_double_click', 'tr', function(){
//$(document).on('single_double_click', 'packagelisttable tr', function(){
// $('#packagelisttable tr').single_double_click(function () {
alert("Try double-clicking me!")
},
function () {
    alert("Double click detected")
});

on 的委托事件版本用于事件，但single_double_click不是事件。它是一个函数。

不可能以

这种方式将jQuery插件/函数连接到动态加载的元素。

加载后，您需要将任何新元素连接到插件，或者更改插件以使用类(例如 class="singleordouble" (，并使用委托的点击事件处理程序，或者您可以添加一个选择器作为附加参数并附加到不变的祖先元素(如 Cerlin Boss 所示(。

例如

    jQuery(document).on('click', '.singleordouble', function (event) {

但是如果你这样做，使用插件就变得毫无意义了。

使用已有的设置超时技巧生成自己的自定义点击事件会更加灵活。

以下是使用自定义事件的完整示例： http://jsfiddle.net/TrueBlueAussie/wjf829ap/2/

在任何地方运行此代码一次：

// Listen for any clicks on the desired 
$(document).on('click', '.singleordouble', function (e) {
    var $this = $(this);
    var clicks = $this.data("clicks") || 0;
    // increment  click counter (from data stored against this element)
    $(this).data("clicks", ++clicks);
    // if we are on the first click, wait for a possible second click
    if (clicks == 1) {
        setTimeout(function () {
            var clicks = $this.data("clicks");
            if (clicks == 1) {
                $this.trigger("customsingleclick");
            } else {
                $this.trigger("customdoubleclick");
            }
            $this.data("clicks", 0);
        }, 300);
    }
});

它将生成自定义事件(在此示例中称为customsingleclick和'customdoubleclick，但随心所欲地调用它们(。

然后，您可以简单地侦听以下自定义事件：

$(document).on('customsingleclick', function(e){
    console.log("single click on " + e.target.id);
});
$(document).on('customdoubleclick', function(e){
    console.log("double click on " + e.target.id);
});

或者使用委托的事件处理程序：http://jsfiddle.net/TrueBlueAussie/wjf829ap/3/

$(document).on('customsingleclick', '.singleordouble', function(){
    console.log("single click on " + this.id);
});
$(document).on('customdoubleclick', '.singleordouble', function(){
    console.log("double click on " + this.id);
});

这个怎么样

我对您的代码进行了一些小的更改。不确定这是否适合您。

我又添加了一个参数，它需要一个选择器。如果您有任何疑问，请发表评论。

jQuery.fn.single_double_click = function (selector, single_click_callback, double_click_callback, timeout) {
    return this.each(function () {
        var clicks = 0,
            self = this;
        jQuery(this).on('click', selector, function (event) {
            clicks++;
            if (clicks == 1) {
                setTimeout(function () {
                    if (clicks == 1) {
                        single_click_callback.call(self, event);
                    } else {
                        double_click_callback.call(self, event);
                    }
                    clicks = 0;
                }, timeout || 300);
            }
        });
    });
}

用法： 

$('#headmnu').single_double_click('li', 
function () {
    ; // not doing anything here
}, function () {
    alert('twice')
});

这里li是第一个jquery选择器($('#headmnu')(的子项

，它是一个ul

这也适用于动态添加的元素。

更新

只是为了澄清$('#headmnu')是所有li的父元素。

我在这里使用了event delegation来实现这一点。有关详细信息，请参阅文档

我检查了你的代码，如果你已经粘贴了，那么你也应该检查

$(#packagelisttable ).on('single_double_click', 'tr', fn) // shold be
$('#packagelisttable').on('single_double_click', 'tr', fn)
$(document).on('single_double_click', 'packagelisttable tr', fn) // should be
$(document).on('single_double_click', '#packagelisttable tr', fn)
相关文章：