点击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的抵触

在这种情况下，您会在控制台中发现错误。