在调用.one()函数之后，如何启用事件处理程序

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

是否可以告诉jQuery刷新。one()函数?谢谢。

是的。从clear-button处理程序中执行。

实际上，您可以创建两个相互异步调用的函数:

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();
    });
}

你甚至可以合并承诺模式(像这样)，并获得非常可组合的行为。

Answer 3

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

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 4

你可以选择一个更通用的解决方案，为自己设置一个小的禁用标志，这样你就可以随意打开/关闭事件处理程序，而不必卸载/重新安装它:

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 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/