我怎么知道为什么jquery事件不火，尽管正确的选择器?

Question

大家好。

我使用数据库搜索生成器在我的项目。

在searchbuilder中，选择作为日期类型的字段后，将显示一个日期选择器。但是事件点击日期选择器的日期和时间按钮不会触发。

我确定我选择的选择器是正确的。因为有了这个选择器，我可以改变css背景颜色中的按钮。但是对于相同的选择器，jquery事件click不会被触发。

我怎么知道为什么会这样?

Dom部分:

...
    ...
        <td class="selectable">
            <button class="dt-datetime-button" type="button">
                <span>23</span>
            </button>
        </td>
    ...
...

以下事件都不会被触发:

$('td.selectable').on('click', function () {
    console.log(1);
});

$('td.selectable').click(function () {
    console.log(2);
});

$(document).on('click', 'td.selectable', function () {
    console.log(3);
});

$(document).click('td.selectable', function () {
    console.log(4);
});

当然，上述事件都不适用于所有三种可能的选择器。这意味着以下三个选择器:

'td.selectable'

'td.selectable button.dt-datetime-button'

'td.selectable button.dt-datetime-button span'

使用这些选择器我可以改变背景颜色。但是jquery事件不会触发!!

td.selectable {
    background-color: red;
}

是否有可能数据库搜索生成器库本身强制禁用我的事件?如果有，我怎么能确定呢?如何防止我的事件被禁用?

如果问题来自其他地方，谢谢您的指导。

谢谢。

Answer 1

原因是您的<td>日期拾取器的元素仅在日期拾取器实际显示时才插入DOM。(实际上，对于整个datepicker的日历表和输入元素也是如此)。

当日期选择器关闭时，整个日历表-随着它的<td>元素- 从DOM中删除(连同它们可能的事件监听器)。

因此，您需要在每次显示日期选择器时附加侦听器，并且在可见之后仅附加。否则，将不附加任何事件侦听器。 在这种情况下，我建议使用事件委托模式将侦听器绑定到父元素，并检查触发事件的实际目标。

看下面的代码片段，我将'mouseup' event附加到父.dtsb-searchBuilder容器:

const data = [
  {date: "2021-10-06", name: "Thomas", position: "Developer"},
  {date: "2020-05-03", name: "James", position: "IT Manager"},
  {date: "2018-03-19", name: "Barney", position: "CEO"},
  {date: "2020-04-22", name: "Thomas", position: "Junior Developer"}
];
$(function() {
  $('#myTable').DataTable({
    data: data,
    columns: [
      {data: "date", title: "Date"},
      {data: "name", title:"Name"},
      {data: "position", title:"Position"},
    ],
    autoWidth: false,
    searchBuilder: {
      // configutation
    },
    dom: 'Qfrtip'
  })
  
  // attach event listener to parent element (event delegation)
  $('.dtsb-searchBuilder').on('mouseup', function(event) {
    const parentIdentifier = event.target.closest('td.selectable'); // identify closest td.selectable
    if(parentIdentifier) {
      console.log(`You clicked on this day: ${parentIdentifier.innerText}`);
    }
  })
})

body {
  width: 80%;
  margin: auto
}
#myTable td {
  text-align: center
}

<script src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.11.5/date-1.1.2/sb-1.3.2/datatables.js"></script>
<link href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.11.5/date-1.1.2/sb-1.3.2/datatables.min.css" rel="stylesheet"/>
<table id='myTable'>
  <thead></thead>
  <tbody></tbody>
</table>

Answer 2

您在table之外使用td元素，因此浏览器从DOM中删除该元素。使用其他一些标签，如div，它将工作。

$('div.selectable').on('click', function() {
  console.log(1);
});
$('div.selectable').click(function() {
  console.log(2);
});
$(document).on('click', 'div.selectable', function() {
  console.log(3);
});
$(document).click('div.selectable', function() {
  console.log(4);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectable">
  <button class="dt-datetime-button" type="button">
    <span>23</span>
  </button>
</div>