方法不工作的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()工作方式是将单个事件处理程序绑定到静态对象.然后,当有人点击您的某个动态对象时,对象上没有直接的事件处理程序,因此点击会在祖先对象中向上冒泡.当事件到达具有事件处理程序的staticParent对象时,它会看到安装了动态事件处理程序,并将发起事件的对象与动态选择器进行比较.如果它们匹配,则触发事件处理程序.如果它们不匹配,则不会触发任何事件.