CODEWITHSUNDEEP
javascriptjqueryonchange
David Gard
David Gard

Reputation: 12047

Group JS events

I currently have four change() events that fire exactly the same code (see below), so I'm wondering if there is a way of grouping these events in one line to save reapeating code four times?

Thanks.

/** Check for a change to any of the search dropdowns */
$('#job-roles').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});
$('#ind-services').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});
$('#bus-services').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});
$('#indi-services').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});

Upvotes: 4

Views: 401

Answers (4)

Bart
Bart

Reputation: 6814

Another option, in addition to the excellent ones already described, is simply:

(function(){
  function doCoolStuff(){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
  }

  $('#job-roles').change(function(e){
    doCoolStuff();
  });
  $('#ind-services').change(function(e){
    doCoolStuff();
  });
  $('#bus-services').change(function(e){
    doCoolStuff();
  });
  $('#indi-services').change(function(e){
    doCoolStuff();
  });
}());

Upvotes: 1

Manse
Manse

Reputation: 38147

Use a class ?

Give all the elements a class of say doSomething then use the following code to implement the listener:

$('.doSomething').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});

Upvotes: 4

Craig
Craig

Reputation: 7076

$('#job-roles, #indi-services, #ind-services, #bus-services').change(function(e){
    letter = $_GET('staff_search');
    initiate_staff_search(letter, '<?php echo $staff_search_nonce; ?>', '<?php echo $name_search_type; ?>')
});

Upvotes: 5

Naftali
Naftali

Reputation: 146310

Option 1: give them all the same class and attach the event to all of them $('.someClass').change(...)

Option 2: Group the event: $('#job-roles, #ind-services, ... ').change(...)

Upvotes: 5

Related Questions