jquery - JQuery 显示的奇怪行为 - 按钮的顺序决定是否显示按钮

Question

我以前从未见过这种行为。单击该行时，JQuery 不会显示删除按钮，除非我重新排序 html 按钮。

我的按钮按所需顺序排列:

<button type="button" id="blog-save" class="green">Save</button>
<button type="button" id="blog-reset">Reset</button>
<button type="button" id="blog-delete" class="red">Delete</button>

我的 CSS 是这样的:

#blog-delete{ 
  display:none 
}

我的 javascript 看起来像这样:

$('body').on('click', '#blog td:first-child', function(e){
  $("#blog-delete").show();
});

一行就是这样:

<tr id="11">
 <td>left column</td>
 <td>right comumn</td>
</tr>

当用户单击 td 行时，AJAX 将数据加载到表单中并显示删除按钮。即使我删除了 AJAX 调用，按钮也不会显示，除非我像这样重新排序按钮:

<button type="button" id="blog-delete" class="red">Delete</button>
<button type="button" id="blog-save" class="green">Save</button>
<button type="button" id="blog-reset">Reset</button>

此外，此行为仅出现在 Android 和 iOS 移动设备上。在 FF、Chrome 和其他平台上，没问题。

有人知道为什么这里的顺序很重要吗？我可以重新排序按钮，但这不是重点，我想知道是什么原因造成的。这是不对的。

编辑

我刚刚注释掉了 css 中的 display:none，我可以看到删除按钮正常。此外，虽然按钮在 css 中被注释掉，但我可以在 javascript 中添加 $("#blog-delete").hide(); 按钮将隐藏但不会返回当我点击该行时。

Answer 1

这个

'#blog td:first-child'

将让它寻找 td 下的第一个 child ，所以你的代码的其余部分:

$('body').on('click', '#blog td:first-child', function(e){
    $("#blog-delete").show();
});

将到达只显示第一个 child 的地方。