4

我正在尝试在 1.7.2 上的方法上使用 jquery，但我遇到了麻烦。

我正在使用这个

$(function(){
$("a").on("click",'.displayBig', function(e) {
    e.preventDefault();
    alert('foo');
})});
<a href="images/large_4.jpg" class="displayBig" data="gallery0"><div id="magnify">dsfsfdsfs</div></a>​

​ 看来我的选择器不工作了。

我在这里创建了一个 jsfiddle。

http://jsfiddle.net/BQDvM/

多谢你们。

4

2 回答 2

7

如果你想使用 的动态版本.on()，那么你需要使用这种形式：

$(staticParentSelector).on('click', '.displayBig', fn);

staticParentSelector必须是指向动态对象的父级的选择器，并且在您运行上述 jQuery 以安装事件处理程序时存在，并且它必须是在安装事件处理程序后未被销毁和重新创建的对象。匹配第二个选择器（我将称之为动态选择器）的对象最初不需要存在，并且可以在将来的任何时间创建。

在最坏的情况下，它可能是这样的：

$(document).on('click', '.displayBig', fn);

由于该document对象满足静态父对象的所有条件。但是，如果您选择一个更接近实际动态对象的静态父对象，并且您不将该document对象用于所有动态事件，您的事件将执行得更好。

所以，如果你有这样的 HTML：

<div id="container">
    <a href="images/large_4.jpg" class="displayBig" data="gallery0">
        <div id="magnify">dsfsfdsfs</div>
    </a>
</div>

然后，您将使用这样的动态版本.on()：

$("#container").on('click', '.displayBig', fn);

动态版本的.on()工作方式是将单个事件处理程序绑定到静态对象。然后，当有人单击您的动态对象之一时，该对象上没有针对单击的直接事件处理程序，因此单击会通过祖先对象冒泡。当事件到达具有事件处理程序的 staticParent 对象时，它会看到安装了动态事件处理程序，并将发起事件的对象与动态选择器进行比较。如果它们匹配，它会触发事件处理程序。如果它们不匹配，则不会触发任何事件。

于 2012-04-12T07:05:28.920 回答
3

或者，如果您想确保只选择 A-tags，您可以使用：

$(function(){
    $('a.displayBig').on("click", function(e) {
        e.preventDefault();
        alert('foo');
    });
});

http://jsfiddle.net/BQDvM/2/ ​</p>

于 2012-04-12T06:36:55.500 回答