点击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时发出警告。我搜索了解决方案，但都没有用。其他jquery函数在脚本文件中运行良好，因此不必担心jquery链接等。

小提琴链接：https://jsfiddle.net/oj6jbk0a/6/

Answer 1

1。这似乎是因为你的js代码在DOM元素放在页面之前运行。

请尝试以下操作：

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

然后它应该工作。

如果您的td元素是在文档准备就绪后的某个时间内由某些js代码创建的，那么只需将代码放在td生成代码之后。

2。您可能在文档中有几个具有相同ID的元素。

如果页面中有多个元素具有相同的id，则jQuery只返回第一个元素，无论你有多少元素。

检查示例，了解当几个元素具有相同ID值时jQuery如何工作：

$('#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冲突

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

Answer 2

这是你的工作小提琴：link

你的问题：

• 始终验证您的HTML，因为它可能会产生无法发现的错误。

• 每个id在页面中必须是唯一的。