點擊TD不起作用

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時應該警惕的東西。我尋找解決方案，但都沒有奏效。 https://jsfiddle.net/oj6jbk0a/6/

Answer 1

這是你的工作提琴：link

您的問題：

• 始終驗證你的HTML，因爲它可以產生不易被發現的錯誤。

• 每個id在頁面中必須是唯一的。

Answer 2

1.這似乎是因爲DOM元素放置在頁面上之前，你的js代碼獲取運行：其他的jQuery功能的腳本文件，所以不擔心jQuery的鏈接等

小提琴環節的內部運作良好。

嘗試以下操作：

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

那麼就應該工作。

如果您的td元素是在文檔準備好之後的一段時間內由一些js代碼創建的，那麼只需在td之後生成代碼即可。

2.您可能在文檔中有多個具有相同標識的元素。

如果頁面中有多個元素具有相同的id，那麼無論有多少元素，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的抵觸

在這種情況下，您會在控制檯中發現錯誤。