直接定位元素时，jQuery 触发器未按预期运行

Question

给定这个 HTML

<div id="section-name">
    <div id="item">
    ...
    </div>
</div>

和这个 jquery，

$("#section-name div").click(function(){
    // do stuff
});
$("#item").trigger("click");

我希望 // do stuff 中的任何内容都能执行。然而，事实并非如此。如果我直接单击该元素，我会得到预期的行为。

我在触发器文档中发现的任何内容都无法帮助我了解这是否是预期的行为。

谢谢。

Answer 1

您的 HTML 中没有任何 #section id，只有 #section-name。要执行 // do stuff，请将 HTML 更改为：

<div id="section">
    <div id="item">
    ...
    </div>
</div>

或者使用 HTML5，执行以下操作：

<section>
    <div id="item">
    ...
    </div>
</section>

然后将事件侦听器更改为以下内容（请注意缺少 #):

$("section div").click(function(){
    // do stuff
});

Answer 2

抱歉，我的错误。 HTML 中似乎存在一些重复的 ID。自我提醒...在发布之前务必进行验证！

也许这会帮助其他同样缺乏纪律的人。 :)

Answer 3

你的 jQuery 选择器是错误的；应该是：

$("#section-name div").click(function(){
    // do stuff
});
$("#item").trigger("click");

希望有帮助！

编辑：感谢 vzwick 的这个 fiddle。