jQuery 如何在Jquery中使用触发器传递参数数据以及控制(this)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2596387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to use trigger in Jquery to pass parameter data as well as control (this)
提问by Shantanu Gupta
I am trying to use same validation function for all my controls. But I don't know much in jQuery and not been able to pass event handler to the trigger. I want to pass textbox id to my custom function. How can I do this
我正在尝试对所有控件使用相同的验证功能。但我对 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>
回答by Felix Kling
Update:I think I figured out what you want to achieve and this should work (there is no need in custom events):
更新:我想我想出了你想要实现的目标,这应该可以工作(自定义事件中不需要):
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");
});
});
If you have questions, just ask :)
如果你有问题,就问吧:)
The first parameter to your bound event handler is the event object itself. See the example from the .trigger()
documentation:
绑定事件处理程序的第一个参数是事件对象本身。请参阅.trigger()
文档中的示例:
$('#foo').bind('custom', function(event, param1, param2) {
alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);
and:
和:
The event object is always passed as the first parameter to an event handler, but if additional parameters are specified during a
.trigger()
call as they are here, these parameters will be passed along to the handler as well.
事件对象总是作为第一个参数传递给事件处理程序,但如果在
.trigger()
调用期间指定了额外的参数,这些参数也将传递给处理程序。
So yours should look like this:
所以你的应该是这样的:
function(event, defaultInputValue, ErrorMessage, ValidMessage)
But it would be better if you described what error you do actually get.
但是如果你描述你实际得到的错误会更好。
Second issue:If I see correctly the second bind is somehow without context:
第二个问题:如果我没看错,第二个绑定不知何故没有上下文:
$(document).ready(function(){
$("#txtFirstName").bind('focusout', function(){});
$(this).bind('customblurfocus',function(defaultInputValue,ErrorMessage,ValidMessage)
{ //...
});
});
To which element do you want to bind your custom event? What should $(this)
be? In this state, even with adding event
as first parameter to the function, this will not work.
Please tell us more about your HTML structure and/or what you want to achieve.
您想将自定义事件绑定到哪个元素?应该$(this)
是什么?在这种状态下,即使将event
第一个参数添加到函数中,这也不起作用。
请告诉我们更多关于您的 HTML 结构和/或您想要实现的目标。
回答by Mark Ursino
You can just make the call to your custom function within the body of the bound event handler:
您可以在绑定事件处理程序的主体内调用您的自定义函数:
$("#foo").bind("click", function(){
callMyFunction( arg0, arg1, arg2 );
});
E.g.
例如
function customHandler(defaultInputValue,ErrorMessage,ValidMessage) {
// define the body of your custom function here
}
$(this).bind('customblurfocus', function(){
customHandler(defaultInputValue, ErrorMessage, ValidMessage);
});