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对象时，它会看到安装了动态事件处理程序，并将发起事件的对象与动态选择器进行比较。如果它们匹配，则触发事件处理程序。如果它们不匹配，则不会触发任何事件。

Answer 2

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

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

http://jsfiddle.net/BQDvM/2/

方法不工作的jquery

2 个答案: