Question

我有一些看起来和我类似的Javascript函数。但行为方式与我希望的方式不同。

我希望在评估输入值时，使用某些文本更新另一个元素。但是对于代码可重用性，我想将要更新的元素传递给函数，但是当我这样做时，keyup()事件将不会在文本输入到输入框时触发。

为什么会这样？

这是有效的，但我已明确指定要更新的元素。

Keyup Working

$(function(){ 
     $("#form1").keyup(function(){
         var val = $(this).val();
         if(val.length < 5){
             $("#inputFeedback").html("Less then 5 chars");
         }else{
             $("#inputFeedback").html("More then 5 Chars!");
     }
});

以下是我想要做的事情，但keyup()事件无效。

密钥组不起作用

var validate = function(feedback){
   var val = $(this).val();
   if(val.length < 5){
       $(feedback).html("Less then 5 chars");
   }else{
       $(feedback).html("More then 5 Chars!");
   }
}


$(function(){
    $("#form1").keyup(validate($("#inputFeedback")));
});

注意：我还尝试将参数$(this)和"#inputfeedback"无效！

我还尝试使用经典的Javascript function foo(bar){ ... }类型函数，但这与上一个示例具有相同的效果。

我确信这是我做得不对或在这里理解的事情，但经过几个小时的搜索和阅读后，我找不到任何可以帮助我解决这个问题！

由于

Answer 1

你绝对不能做那样的回调：

http://docs.jquery.com/How_jQuery_Works#Wrong

Answer 2

var validate = function(feedback){
  var val = $(this).val();

  if(val.length < 5){
    $(feedback).html("Less then 5 chars");
  }else{
    $(feedback).html("More then 5 Chars!");
  }
}


$(function(){
  $("#form1").keyup(function(){
    validate.call(this, '#inputFeedback');
  });
});

或

var validate = function(feedback){
  return function(){
    var val = $(this).val();

    if(val.length < 5){
      $(feedback).html("Less then 5 chars");
    }else{
      $(feedback).html("More then 5 Chars!");
    }
  }
}


$(function(){
  $("#form1").keyup(validate('#inputFeedback'));
});

Answer 3

尝试这样写：

var feedback=$("#inputFeedback");
$("#form1").keyup(validate(feedback));

类似的Jquery函数不会多次触发keyup（）

3 个答案: