JQuery - Add click event to multiple elements

Question

I have the following:

$('#applicationsGrid tbody').on('click', 'td.details-control', function () {
    var formattedData = dosomething();
    $(this).parent('tr').after(formattedData);
});

$('#applicationsGrid tbody').on('click', 'td.child-details-control', function () {
    var formattedData = dosomething();
    $(this).parent('tr').after(formattedData);
});

$('#applicationsGrid tbody').on('click', 'td.grand-child-details-control', function () {
    var formattedData = dosomething();
    $(this).parent('tr').after(formattedData);
});

How can I combine all the "on" events into one click event that would take care of clicking on 'td.details-control', 'td.child-details-control', 'td.grand-child-details-control', so I can reduce duplicate code?

Sudharsan S · Accepted Answer · 2015-06-04 14:45:50Z

2

Use Multiple Selector (“selector1, selector2, selectorN”) in jquery

$('#applicationsGrid tbody').on('click', 'td.details-control,td.child-details-control,td.grand-child-details-control', function () {
      var formattedData = dosomething();
      $(this).parent('tr').after(formattedData);
});

Learn Multiple selector

answered Jun 4, 2015 at 14:45

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Balachandran · Accepted Answer · 2015-06-04 14:52:30Z

1

Just you can concatenate with multiselector

$('#applicationsGrid tbody').on('click', 'td.details-control,td.child-details-control,td.grand-child-details-control', function () {
              var formattedData = dosomething();
              $(this).parent('tr').after(formattedData);
            });

OR use end with selector ,in your case all class value is ended with details-control,

  $('#applicationsGrid tbody').on('click', ,'td[class$=details-control]', function () {
              var formattedData = dosomething();
              $(this).parent('tr').after(formattedData);
            });

edited Jun 4, 2015 at 14:52

answered Jun 4, 2015 at 14:46

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

Collectives™ on Stack Overflow

JQuery - Add click event to multiple elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related