нажмите на тд не работает

Question

То, что я пытался до сих пор

$('#new-item').click(function(){alert('Hi');}); 
$('tr #new-item').click(function(){alert('Hi');}); 
$('.create-list #new-item').click(function(){alert('Hi');}); 
$('.create-list table tbody tr #new-item').click(function(){alert('Hi');}); 
$('.create-list table').on('click','#new-item',function(){alert('hi')}); 
$('.create-list table').on('click','tr #new-item',function(){alert('hi')}); 

и т.д. Я попробовал также как .create-list>table>tbody>tr>td, но и не работал.
С помощью этого DOM

<div class='create-list'><table> 
    <tbody> 
    <tr> 
     <td id="new-item">click me</td> 
    </tr> 
    </tbody> 
</table></div> 

Я знаю, это было предложено раньше, но я не могу получить эту работу, это должно насторожить то, когда new-item нажата. Я искал решения, но все не сработало. Другие функции JQuery хорошо работает внутри файла сценария поэтому не беспокоясь о Jquery ссылок и т.д.

скрипку ссылка: https://jsfiddle.net/oj6jbk0a/6/

Answer 1

Вот ваша рабочая скрипка: link

Ваших проблемы:

• Всегда проверяйте ваш HTML, так как он может генерировать невозможно найти, по-ошибку.

• Каждый id должен быть уникальным на странице.

Answer 2

1. Кажется, потому что ваш код JS получает работать до того элементы DOM размещены на этой странице.

Попробуйте следующее:

$(document).ready(function(){ 
    $('#new-item').click(function(){alert('Hi');}); 
}) 

Затем он должен работать.

Если ваш элемент td создан некоторым кодом js в течение некоторого времени после того, как документ готов, тогда просто введите код после td кода генерации.

2. У вас может быть несколько элементов с одинаковым идентификатором в документе.

Если у вас есть несколько элементов на странице с одинаковым идентификатором, jQuery просто возвращает только первый элемент независимо от того, сколько у вас элементов.

Проверьте пример, чтобы увидеть, как JQuery работает, когда несколько элементов есть с тем же значением ID:

$('#new-item').html('Hello');

#new-item { 
 
    min-height: 20px; 
 
    border: solid 1px #999; 
 
    margin: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="new-item"></div> 
 
<div id="new-item"></div> 
 
<div id="new-item"></div>

3. Вы можете иметь JQuery противоречило

В этом случае вы заметите ошибку в консоли.