DataTables响应仅在单击图标时展开/折叠（从单击事件中排除单元格中的其他内容）

Question

据我所知，解决方法是在其自己的列中放置/展开图标，但是，对于我正在处理的应用，我希望图标与第一列一起位于第一列中，在这种情况下是一个复选框。

当选中/取消选中复选框时，使用第一列中的展开/折叠图标，它会触发DataTables行的展开/折叠。有没有办法只通过图标触发展开/折叠（即排除所有其他单元格内容）？

我尝试过：

• 好像展开/折叠绑定到单元格（td）点击事件
• 图标由css：before on cell（td）DOM元素
生成

• 因此我尝试检测已点击的DOM元素，如果不是td e.stopPropagation()或e.stopImmediatePropagation()则停止展开/折叠但仍会发生展开/折叠事件< / p>

  // class .wpsc_ticket_row on tr DOM element captures click event to open ticket
  jQuery( document ).on( 'click', '.wpsc_ticket_row', function( e ) {
  
      //  captures clicked DOM element
      var cell = jQuery( e.target );
  
      // check if clicked DOM element is td
      if ( cell.is( 'td' ) ) { 
  
          // exclude first column from opening ticket by detecting wpsc_exclude class
          if ( !cell.hasClass( 'wpsc_exclude' ) ) { 
  
              // get ticket id
              var ticketId = jQuery( this ).data( 'id' ); 
  
              // open ticket
              addOpenTicket( ticketId, true ); 
  
          }
  
      // if clicked DOM element is not td check closest td for wpsc_exclude
      } else if ( !cell.closest( 'td' ).hasClass( 'wpsc_exclude' ) ) { 
  
          // get ticket id
          var ticketId = jQuery( this ).data( 'id' ); 
  
          // open ticket
          addOpenTicket( ticketId, true ); 
  
      } else {
  
          // if clicked DOM element not td and does not have class wpsc_exclude stop all events
          e.stopPropagation(); // e.stopImmediatePropagation()
  
      }
  
  }
  

任何建议表示赞赏。 TIA