如何在Jquery中使用触发器传递参数数据以及控制(this)。

Question

我想为所有控件使用同一个验证函数。但是我对jQuery不太熟悉，也无法将事件处理程序传递给触发器。我想将文本框ID传递给我的自定义函数。我该怎么做？

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $("#txtFirstName").bind('focusout', function()
   {
   $(this).trigger("customblurfocus",[$(this).val(), $(this).val() + " Required !", "Ok !"]);
   }
  );

  $(this).bind('customblurfocus',function(defaultInputValue,ErrorMessage,ValidMessage)
     {alert($(this).val()); 
     if($(this).val()=="" || $(this).val()==defaultInputValue)
      {
      $(this).val(defaultInputValue);
      $(this).siblings("span[id*='error']").toggleClass("error_set").text(ErrorMessage).fadeOut(3000);  
      }
     else
      {
      $(this).siblings("span[id*='error']").toggleClass("error_ok").text(ValidMessage).show(1000);
      }
     }
   );
    });
</script>

- Shantanu Gupta

Answer 1

更新：我认为我已经明白您想要实现什么，以下代码应该可以实现（不需要使用自定义事件）：

function validate(element, defaultInputValue, ErrorMessage, ValidMessage) {
    alert($(this).val()); 
    if($(this).val()=="" || $(this).val()==defaultInputValue)
    {
        $(this).val(defaultInputValue);
        $(this).siblings("span[id*='error']").toggleClass("error_set").text(ErrorMessage).fadeOut(3000);  
    }
    else
    {
       $(this).siblings("span[id*='error']").toggleClass("error_ok").text(ValidMessage).show(1000);
    }
}

$(document).ready(function(){
   $("#txtFirstName").bind('focusout', function() {
      validate(this, "defaultValue here", "Error message here", "Valid message here");
   });
});

如果你有问题，只需问就好了 :)

---

绑定事件处理程序的第一个参数是事件对象本身。请参阅.trigger()文档中的示例：

$('#foo').bind('custom', function(event, param1, param2) {
  alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);

并且：

事件对象始终作为事件处理程序的第一个参数传递，但是如果在.trigger()调用期间指定了附加参数（例如此处），则这些参数也将传递给处理程序。

因此，您的代码应该像这样：

function(event, defaultInputValue, ErrorMessage, ValidMessage)

如果你描述一下你实际遇到的错误会更好。

---

第二个问题：如果我没看错，第二次绑定有些没有上下文。

$(document).ready(function(){
     $("#txtFirstName").bind('focusout', function(){});

     $(this).bind('customblurfocus',function(defaultInputValue,ErrorMessage,ValidMessage)
     { //...
     });
});

你想绑定哪个元素来触发你的自定义事件？ $(this) 应该是什么？即使在将event作为函数的第一个参数添加后，当前状态下它也无法工作。
请告诉我们有关你的HTML结构和/或你想要实现的内容的更多信息。

- Felix Kling

Answer 2

您可以在绑定的事件处理程序的主体内直接调用自定义函数：

$("#foo").bind("click", function(){
  callMyFunction( arg0, arg1, arg2 );
});

例如

function customHandler(defaultInputValue,ErrorMessage,ValidMessage) {
  // define the body of your custom function here
}

$(this).bind('customblurfocus', function(){
  customHandler(defaultInputValue, ErrorMessage, ValidMessage);
});

- Mark Ursino