1

我有一个特殊的场景需要在具有特定类的第一个子元素上动态绑定事件。例如我有一个 div：

<div></div>

然后我在它的第一个“.button”子元素上绑定点击事件：

$('div').on('click', '.button:first', function (event) {
    alert($(event.target).text());
});

稍后将创建子元素：

$('div').append(
    "<span class='button'>Button1</span>" +
    "<span class='button'>Button2</span>");

在这种情况下，当 Button1 被点击时，它会弹出警告窗口。Button2 不会。这是正确的，...直到我在 div 顶部放置一个“.button”元素。

<span class='button'>Outer Button</span>
<div></div>

然后单击 Button1 将永远不会触发警报窗口。代码在这里：http: //jsfiddle.net/D2H92/

知道为什么这并不总是有效，以及如何解决它？干杯!

4

3 回答 3

3

:first只获取与当前选择器匹配的第一个元素 - 在本例中，第一个元素匹配.button. 即使事件绑定到<div>元素，这也不会使选择器只查看div目标。

尝试:first-child改用。

于 2013-03-19T05:08:09.157 回答
2

更高版本的 jQuery 将处理这个问题。 在此处查看已修复的错误。

检查它（将 jQuery 版本更改为 1.8.3）。

// ..same code
于 2013-03-19T05:17:16.527 回答
1

如果你使用 :first 或 :last 伪属性，那么它只适用于 jQuery 1.8.3 或更高版本。如果你想要你的 div 中的所有按钮（通过省略按钮类之后的 :first），那么它适用于早期版本的 jQuery。因此，在您的 jsfiddle 示例中，您选择了 jQuery 1.7.2，但您必须至少切换到 1.8.3 版本

希望能回答你的问题。

于 2013-03-19T05:20:44.657 回答