Question

I’ve written an event handler that detects a change in a select option list and then modifies a few sibling inputs based on the selected value.

I now want to generalise this functionality so that I can use several groups of (driving-select-option-lists + siblings) concurrently. The new onChange handler might look like this:

$('.select-list').on('change', handleChange);

And the method something like this:

function handleChange(event){
  $parent = $(event.delegateTarget).closest('.parent');
  var parentId = '#' + $parent.attr('id');

  $(parentId + '.foo').flyAway();
  $(parentId + '.bar').destroy();
  $(parentId + '.bax').render();
  $(parentId + '.qux').doAGiggy();
  $(parentId + '.lorem').applyPerfume();
  $(parentId + '.ipsum').eatBetter();
  // ... several times
}

I would prefer not to repeat the parentId part throughout the handler as it’s messy and tough to maintain. Is there a way to give my selectors implicit scope i.e. $('.a-class') knows which parent-id I expect it to “work” within?

Answer 1

Assuming you delegate event (as it is suggested by the use on .on()) with the following code:

$('.parent-container').on('change', '.select-list', handleChange);

The event object has delegateTarget property.

Description: The element where the currently-called jQuery event handler was attached.

So you could do:

function handleChange(event){

  $(event.delegateTarget).find('.a-class').doStuff();
  // .. now use a similar selector $(parentId + ..) several times
}