jquery 方法不起作用

Question

我尝试在 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/

谢谢大家。

Answer 1

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