2

考虑您想为页面上的许多链接添加 ajax 功能。

<a href='http://domain/purchase/car' class='purchase'>Car</a>
<a href='http://domain/purchase/bag' class='purchase'>Bag</a>
<a href='http://domain/purchase/laptop' class='purchase'>Laptop</a>

和

<a href='http://domain/sell/car' class='sell'>Car</a>
<a href='http://domain/sell/bag' class='sell'>Bag</a>
<a href='http://domain/sell/laptop' class='sell'>Laptop</a>

现在您可以定义一些变量来引用 JavaScript 代码中的这些链接组：

var purchaseLinks = $('.purchase'),
    sellLinks= $('.sell');

好吧，足够的故事；）。

您可以查看this fiddle和this one中的问题。

根据jQuery 的 add() 文档，返回值是一个新的 jQuery 对象。同样，附加到 jQuery 对象事件的函数处理程序中的 AMAIK 引用thisDOM 元素。

为什么通过使用add()方法，this处理函数的引用document？我不明白。我无法根据我的知识做出合乎逻辑的看法。换句话说：

jQueryObject1.click(function(){
    // Here, $(this) is the jQuery object
});

jQueryObject2.click(function(){
    // Here again, $(this) is the jQuery object
});

jQueryObject1.add(jQueryObject2).click(function(){
    // Here $(this) refers to the Document, why?
    // I think jQueryObject1.add(jQueryObject2) should equal jQueryObject3
});

更新：

感谢您的回答。我再次向读者推荐 Live is Deprecated页面，以便每个人都可以改进。

4

2 回答 2

4

您小提琴中的问题是使用.live(). jQuery 文档状态：

不支持链接方法。例如，$("a").find(".offsite, .external").live( ... );无效且无法按预期工作。

对每个人来说幸运的是，该.live()方法已弃用，因此您不必再担心类似的事情了。您可以on改用并利用事件委托。

更新（在@Esailija 发表评论之后）

这就是实际发生的情况。你在这里调用 jQuery：

var purchaseLinks = $('.purchase');

这会产生一个 jQuery 对象，该对象具有一个selector属性。然后调用.add()，它又调用内部pushStack方法：

return this.pushStack(isDisconnected(set[0]) || isDisconnected(all[0]) ? all : jQuery.unique(all));

该pushStack方法创建新的 jQuery 对象。它只用一个参数调用。这是该方法的相关部分（请注意，在我们的例子中，name和selector都是undefined）：

function (elems, name, selector) {
    // ...

    ret.context = this.context;

    if (name === "find") {
        ret.selector = this.selector + (this.selector ? " " : "") + selector;
    } else if (name) {
        ret.selector = this.selector + "." + name + "(" + selector + ")";
    }

    // Return the newly-formed element set
    return ret;
}

另请注意，this.context现在是文档（由于您的原始 jQuery 对象没有指定上下文，因此假定了最高可能的上下文）。

所以新形成的元素集没有selector属性，并且以文档作为其上下文。然后当我们调用 时.live()，jQuery 简单地调用.on()如下：

jQuery( this.context ).on( types, this.selector, data, fn );

我们可以看到问题所在。上下文是文档，没有选择器，因此事件处理程序绑定到文档。在我们的例子中，上述行实际上是这样的：

jQuery( document ).on( "click", function() {
    //Your event handler
});

alert您可以通过单击文档中的任意位置（而不仅仅是链接）触发您的事实来看到这一点。

这个故事的主旨？停止使用.live()！

于 2012-07-11T11:52:39.320 回答
0 
var purchaseLinks = $('.purchase'),
    sellLinks= $('.sell');
purchaseLinks.add(sellLinks).on('click', function(e) {
    e.preventDefault();
    alert(this.href);
});

.add()更改.live()为没有错.on()。

http://jsfiddle.net/iambriansreed/q573N/5/

于 2012-07-11T11:51:36.797 回答