Как активировать опцию щелчка по столбцу, реагирующему на таблицу в innerHTML

Question

У меня есть страница, где я устанавливаю содержимое dataTable в div, используя следующий код:

$('#' + divid + '-data')[0].innerHTML = data.TableContent;

Я получаю содержимое таблицы другим методом. Вот мой TableContent:

<table class="table-responsive dataTable table-striped" id="51">
   <tr>
      <td class="details-control"></td>
      <td>Hi</td>
   </tr>
</table>

На странице, когда я пытался отобразить предупреждающее сообщение при нажатии на столбец, реагирующий на таблицу, ничего не происходит.

$("td.details-control").on("click", function(e) {
   alert("hi");
});

Я тожепопробовал:

document.getElementById("#table-51").on("click", "tr td.details-control", function () {
                alert("hi");
            });

Пожалуйста, помогите и спасибо заранее.

Answer 1

Попробуйте это:

$("td.details-control").click(function(){
  alert("Hi");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table-responsive dataTable table-striped" id="51">
   <tr>
      <td class="details-control">Show alert</td>
      <td>Hi</td>
   </tr>
</table>

Answer 2

Вы, кажется, слишком усложняете эту проблему;будь проще! Вам не хватает чего-то, чтобы щелкнуть (пусто <td>), и использование собственного метода DOM вместе с делегированным обработчиком событий jQuery никогда не сработает.

var data = { TableContent: `<table class="table-responsive dataTable table-striped" id="51">
   <tr>
      <td class="details-control">click me</td>
      <td>Hi</td>
   </tr>
</table>`
}

$('#sample')[0].innerHTML = data.TableContent;

$('#sample').on('click', 'td.details-control', function(e) {
   alert("hi");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sample"></div>

Answer 3

попробуйте

   <table class="table-responsive dataTable table-striped" id="51">
       <tr>
      <td class="details-control"></td>
      <td onclick="alert('hi')">Hi</td>
   </tr>
</table>