Question

我有一个函数“single_double_click”，我通过$('#packagelisttable tr').single_double_click(fn)调用相同的函数，它可以很好地处理静态数据。

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

$(#packagelisttable ).on('single_double_click', 'tr', fn)
$(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")
});

Answer 1

on的委托事件版本用于事件，但single_double_click不是事件。这是一个功能。

无法将jQuery插件/函数连接到动态加载的元素。

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

e.g。

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

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

使用您已有的settimeout技巧生成自己的自定义点击事件会更灵活。

以下是使用自定义事件的完整示例：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);
});

Answer 2

this

怎么样？

我对您的代码做了一些小改动。不确定这是否适合你。

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

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来实现这一目标。有关详细信息，请参阅documentation

Answer 3

我检查了您的代码，如果您已粘贴，则还应检查

$(#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)

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

3 个答案: