Question

我有一张带细胞的桌子。我想只点击一次单元格以标记它。在我标记并保存之后，我想点击一个clear_Button，它会取消标记单元格并让我再次标记它们。

$("td").one('click', function (evt) {
        $(this).css("border", "3px solid yellow");
});

$("#clear_Button").click(function () {
        $("#table td").css("border", "1px solid black");
    });

但由于.one（）函数只允许对象执行一次，因此无法再次单击该单元格。是否有可能告诉jQuery刷新.one（）函数？感谢。

Answer 1

您可以采取以下方式

function tdClick (evt) {
        $(this).css("border", "3px solid yellow");
}   
 $("td").one('click', tdClick );

$("#clear_Button").click(function () {
        $("#table td").css("border", "1px solid black");
      $("td").one('click', tdClick );
    });

或您可以使用on和off来分配和删除事件。

function tdClick (evt) { $("td").off('click' ); $(this).css("border", "3px solid yellow"); } $("td").on('click', tdClick ); $("#clear_Button").click(function () { $("#table td").css("border", "1px solid black"); $("td").on('click', tdClick ); });

Answer 2

单击清除按钮后，您可以重新附加事件。

var attachEvents = function () {
    $("div").one('click', function (evt) {
        $(this).css("border", "3px solid yellow");
    });
}

$("#clear_Button").click(function () {
    $("div").css("border", "1px solid black");
    attachEvents();
});

attachEvents();

演示：http://jsfiddle.net/82vr7/2/

Answer 3

您可以使用更通用的解决方案并使自己成为一个禁用标志，这样您就可以随意打开/关闭事件处理程序，而无需卸载/重新安装它：

jQuery.fn.suspend = function(val) {
    return this.data("suspended", !!val);
}

jQuery.fn.isSuspended = function() {
    return this.data("suspended");
}

$("td").on('click', function (evt) {
     if (!$(this).isSuspended()) {
        $(this).css("border", "3px solid yellow");
     }
});

然后，您可以随时为特定单元格禁用事件处理程序：

$("#aParticularCell").suspend(true);

或所有细胞：

$("td").suspend(true);

或者启用它：

$("#aParticularCell").suspend(false);

或所有细胞：

$("td").suspend(false);

关键是您可以设置一个标志来控制是启用还是禁用事件处理程序，您只需切换该标志以更改行为，您可以在单个单元格或任何单元格上使用此标志细胞群。

Answer 4

是否可以告诉jQuery刷新.one（）函数？感谢。

是。从清除按钮处理程序执行此操作。

实际上，您可以创建两个异步调用彼此的函数：

function cellSelecter() {
    $("td").one('click', function (evt) {
        $(this).css("border", "3px solid yellow");
        cellClearer();
    });
}
function cellClearer() {
    $("#clear_Button").one('click', function () {
        $("#table td").css("border", "1px solid black");
        cellSelecter();
    });
}

您甚至可以合并Promise模式（like this），并获得非常可组合的行为。

Answer 5

这里有一种不同的方法（没有.one()）

//--- this is your clickable thing
$("#clickme").on("click", function(){
    if(!$(this).hasClass("alreadyclicked")){
        //--- the first time the thing is clicked
        $(this).css({background: "yellow"}).addClass("alreadyclicked");
    }else{
        alert("already clicked.. reset!");   
    }    
});

//--- and this is the reset button
$("#reset").on("click", function(){
    $("#clickme").css({background: "red"}).removeClass("alreadyclicked"); 
})

小提琴 http://jsfiddle.net/KSV6n/1/

调用.one（）函数后如何启用事件处理程序？

5 个答案: