Question

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

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