Question

我写了下面的jQuery脚本，我正试图做一个'酷转换'，哈哈。当您开始输入＃post-area-input input type = text-box时，页面应该在您键入时切换到'compose.php'页面（表单），如果您键入超过19个字符，则文本框应该在keyup上扩展到80％宽度，如果它小于30个字符，则该框恢复为300px。

但问题是，如果你模糊了＃post-area-input文本框，然后再次聚焦，加载函数会重新加载，而compose.php文件中的其他（可能是输入的）数据将会消失

问题是：我如何制作它以防止最后一个功能一旦发生就再次发生？我看过.unbind（），但看到好像另一个函数同时在同一个ID上，这也会禁用扩展函数。

非常感谢！非常感谢任何答案:)（脚本在下面）

$('#post-area-input').keyup(function(){
    if($('#post-area-input').val().length > 19){
        $('#post-area-input').animate({width: '80%',}, 80, function(){});
    }
    else {
        $('#post-area-input').animate({width: '300',}, 80, function(){});
    }
});

$('#post-area-input').blur(function(){
    if($('#post-area-input').val().length < 19){
        $('#post-area-input').animate({width: '300',}, 80, function(){});
    }
});

$('#post-area-input').keyup(function(){
    $('#pcontent').load('compose.php').hide().fadeIn('slow');
});

Answer 1

我建议不要将多个匿名函数绑定到事件处理程序。取消绑定它们可能会变得模棱两可。相反，声明函数并将它们绑定/取消绑定：

function keyUpFuncA(e) {
  //code
}
function keyUpFuncB(e) {
  //code
}
$(document).keyup(keyUpFuncA);
$(document).keyup(keyUpFuncB);

//then later when unbinding:
$(document).unbind("keyup", keyUpFuncA);

可能很诱人，但你不想做的事情是使用全局变量来跟踪何时加载load.php。

Answer 2

您应该为您的键盘功能命名：

$('#post-area-input').bind("keyup.firstnameoffunction", function() { /* .. */ });
$('#post-area-input').bind("keyup.secondnameoffunction", function() { /* .. */ });
$('#post-area-input').unbind("keyup.firstnameoffunction");

您还可以使用以下方法检查当前绑定到对象的内容：

$('#post-area-input').data("events");

Answer 3

我对实际发生的事情有点模糊，所以请原谅我，如果我是钝的，但实现事件'否定'的一种方法可能是使用bool旗帜。例如：

var run_load_function = true;

...

$('#post-area-input').blur(function(){
    run_load_function = false;
    ...
});

...

$('#post-area-input').keyup(function(){
    if (run_load_function)
        $('#pcontent').load('compose.php').hide().fadeIn('slow');
});

然后您还有机会在需要时重置bool，提供一些细粒度控制。好问题，我期待着其他答案！希望这可以帮助！：）

使用相同的触发器解除两个jQuery函数之一的绑定？

3 个答案: