Avoid repeating jQuery code

Question

If I have code like what is shown below, is there any way of avoiding the need of repeating the code over and over again?

 $("#ClearSign1").click(function () {
    signaturePad1.clear();
 });
 $("#ClearSign2").click(function () {
    signaturePad2.clear();
 });
 $("#ClearSign3").click(function () {
    signaturePad3.clear();
 });
 $("#ClearSign4").click(function () {
    signaturePad4.clear();
 });
 $("#ClearSign5").click(function () {
    signaturePad5.clear();
 });

I can do this:

 for(var i = 1; i < 6; i++) {
    $("#ClearSign" + i).click(function () {
       signaturePad1.clear();
    });
 }

But how do I handle the signaturePad1 variable? I need it to have the 1 updated to 2, 3, 4, 5 as looping through.

Don't just leave it as it is. What benefit is there in refactoring it how you suggest? Pretty minimal. — Liam, Jul 06 '16 at 15:42

score 4 · Accepted Answer · edited May 23 '17 at 12:16

But how do I handle the signaturePad1 variable? I need it to have the 1 updated to 2, 3, 4, 5 as looping through.

Well, the most obvious way to clean this up without altering much of your code is to invoke the signaturePad# method on the object on which its scoped to, using the bracket notation. In the outer most scope, that is the window object:

ES5 solution: You must wrap the invocation in an IIFE, which will maintain the value of i properly for each callback within the closure of that IIFE.

for(var i = 1; i < 6; i++) {
  $("#ClearSign" + i).click(function () {
   (function(idx) {
     // in here idx is always the proper i value
     window['signaturePad' + idx].clear();
   })(i); 
  });
}

Or you can create an array of your clearSign functions and use a forEach, which would maintain the proper scope. Or create an array of click callbacks, as Pranav C Balan showed.

ES6 solution: (use let instead of var):

for(let i = 1; i < 6; i++) {
  $("#ClearSign" + i).click(function () {
     window['signaturePad' + i].clear();
  });
}

Using let makes i block scoped within the loop block. This properly captures the value for the callbacks and keeps us from polluting the global scope. Not to mention, it keeps the code more readable and concise - nested IIFE's inside for loops don't really add to code clarity and can cause confusions.

Pranav C Balan · Answer 2 · 2016-07-06T15:58:03.987

Use attribute starts with selector which helps to avoid the for loop. Then store the variable reference in an array to get reference based on the index on click event.

// store the variable refernce in an array
var sign = [signaturePad1, signaturePad2, signaturePad3, signaturePad4, signaturePad5];
// assign click envent to elements and also cache the elements to get index
var $ele = $('[id^="ClearSign"]').click(function() {
  // get element by index and apply clear
  sign[$ele.index(this)].clear();
});

Or in case the variables are in global context then you can get it from window object.

var $ele = $('[id^="ClearSign"]').click(function() {
  // get element by index from window object and apply clear
  window['signaturePad1' + ($ele.index(this) + 1)].clear();
});

score 0 · Answer 3 · answered Jul 06 '16 at 15:43

You can give all divs a common class e.g. 'clickables' . Then bind click event using that class as a selector.

$(".clickables").on("click", function(e){
  var targetObject = $(this).attr("id").replace("ClearSign", "signaturePad");
  window[''+targetObject].clear();
});//click

score 0 · Answer 4 · answered Jul 06 '16 at 15:49

0

Didn't see you were calling multiple methods in the click events

$('[id^="ClearSign"]').click(function () {
   var id = $(this).attr("id").split("ClearSign", "")[1];
   signaturePad + id.clear();
});

answered Jul 06 '16 at 15:49

John williams

654
1
8
22

I don't know but maybe `signaturePad + id.clear();` doesn't work. – Mohammad Jul 06 '16 at 15:52
Your signaturePad should take a id param in signaturePad(id)? – John williams Jul 06 '16 at 15:56

Avoid repeating jQuery code

4 Answers4