Question

我有以下内容：

$('#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);
});

如何将所有“on”事件组合成一个单击事件，该事件将负责点击“td.details-control”，“td.child-details-control”，“td.grand-child-details” -control'，所以我可以减少重复的代码？

Answer 1

在jquery中使用多重选择器（“selector1，selector2，selectorN”）

$('#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

Answer 2

您可以使用multislector连接

$('#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);
            });

或使用 end with selector ，在您的情况下，所有类值都以 details-control 结束，

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

JQuery - 将click事件添加到多个元素

2 个答案: