How can the JQuery bind() plugin help me
I am new to JQuery
I am writing a simple data validation using JQuery.Here is the HTML part:
<input type="text" id="testing">
This is the JQuery part:
$(document).ready(function(){
$("#testing").click(function(){
// doing something;
});
$("#testing").change(function(){
// doing something;
});
$("#testing").mouseover(function(){
// doing somethin开发者_Python百科g;
});
});
$("#testing") repeated three times in my sample code, is it possible to simplify this?
I am not sure if bind() can help solve the question.you could do the following
$(document).ready(function() {
var testing = $('#testing');
testing.click(function() { });
testing.change(function() { });
testing.mouseover(function() { });
});
or (using chains):
$(document).ready(function() {
/* var testing = */ $('#testing') // the assignment is optional, but you can reuse the selector
.click(function() { })
.change(function() { })
.mouseover(function() { });
});
with bind
you can create eg. custom eventhandlers:
$(document).ready(function() {
var testing = $('#testing');
testing.bind('fill', function() { });
testing.trigger('fill');
});
as reading through the docu, you could also do:
$(document).ready(function() {
/* var testing = */ $('#testing') // the assignment is optional, but you can reuse the selector
.bind('click change mouseover', function() { });
});
or with jquery 1.4:
$(document).ready(function() {
/* var testing = */ $('#testing') // the assignment is optional, but you can reuse the selector
.bind({
click: function() { },
change: function() { },
mouseover: function() { }
});
});
jQuery is chain-able. You can also do it like this,
$(document).ready(function(){
$("#testing").click(function(){
// doing somthing;
}).change(function(){
// doing somthing;
}).mouseover(function(){
// doing somthing;
});
});
or with .bind()
$(document).ready(function(){
$("#testing").bind({
click : function(){
// doing somthing;
},
change : function(){
// doing somthing;
},
mouseover : function(){
// doing somthing;
}
});
});
if you have just one action in all of that, you can do this,
$("#testing").bind('click change mouseover', function(){
// doing same thing on three events
})
You could set var t = $("#testing");
just once at the start of the outer function (that identifies the node with that id
), then call t.click
, t.change
and t.mouseover
.
#Testing shouldn't be repeated three times as # is an id. You could use .Testing as the period signifies a class.
<input type="text" id="Testing" class="myTesting"/>
'.myTesting'
I actually prefer my code to look like yours as it's easier to ready. Chaining can sometimes look and feel complex and if you miss a } or ) they can be difficult to track down.
But that is purely my opinion.
chaining methods would have better performance:
$("#testing").click(function(){
/* something */
}).change(function(){
/* something */
}).mouseover(function(){
/* something */
});
You can put the linebreaks wherever you want:
$("#testing").click(function(){
/* something */
}) // don't put a semicolon here
.change(function(){
/* something */
}) // don't put a semicolon here either
.mouseover(function(){
/* something */
}); // put it here because you will not continue chaining.
Bind provides extra functionality but it's not what you are asking for in this case.
精彩评论