JQuery

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

只要你可以用多选器连接

$('#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 ，在您的情况下，所有 class 值都以 details-control 结尾，

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

JQuery - 为多个元素添加点击事件

JQuery - Add click event to multiple elements

event-handling