How can the JQuery bind() plugin help me

Question

Hi all,

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 something;
      });
});

$("#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.

Answer 1

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
})

Answer 2

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.

Answer 3

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() { }
        });
});

Answer 4

#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.

Answer 5

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.