Question

如果我有一个像$ add这样的选择器，我可以这样做：

$add.click(function () {.....

但我不能这样做：

$('body').delegate($add, 'click', function () {.....

我怎样才能让它发挥作用？

更新

以@ T.J。克劳德的回答记在心里。这是完整的情况，我创建了两个按钮（我插入到dom中）

$add      = $(document.createElement('button')).addClass('add').appendTo('body');
$subtract = $(document.createElement('button')).addClass('subtract').appendTo('body');

在$ add.selector上执行委托会对这两个按钮生效，为什么会这样？

Answer 1

您可以使用the selector property。不过，请参阅文档中的警告，以及有关将其与context相结合的说明。其中一个警告（虽然在我看来，文档中并不是很明显）是当你开始使用方法调用修改选择时，selector属性变得不那么有用了。例如：

var $add = $("div").not(".bar");
display("$add.length = " + $add.length);
// displays 3 in my example, because I have three divs that don't have class "bar"
display("$add.selector = " + $add.selector);
// displays "div.not(.bar)" (note the '.' rather than ':')
$add = $($add.selector);
display("$add.length = " + $add.length);
// displays 0 in my exmaple, because "not" is taken for a class name

Live copy

在我看来，这不是很有用。

这回答了你实际问过的问题，但可能有更好的方法来解决潜在的设计问题。： - ）

更新：重新进行更新，问题可能是在selector上使用$add返回“按钮”。（我没试过，似乎很可能。）

我会这样解决：

选项A ：

如果您只有一个“add”类的按钮，那么：

$add      = $(document.createElement('button')).addClass('add').appendTo('body');
$subtract = $(document.createElement('button')).addClass('subtract').appendTo('body');
$('body')
    .delegate("button.add", "click", handleAdd)
    .delegate("button.subtract", "click", handleSubtract);

选项B ：

如果其他按钮包含这些类，请为这些按钮指定一些识别特征 - 他们自己的类，或id或name，然后在delegate选择器中使用它。示例（但必要时调整）：

$add      = $("<button id='btnAdd' class='add'>").appendTo('body');
$subtract = $("<button id='btnSubtract' class='subtract'>").appendTo('body');
$('body')
    .delegate("#btnAdd", "click", handleAdd)
    .delegate("#btnSubtract", "click", handleSubtract);

请注意，我已经切换到HTML表示法来创建按钮，因为当你进入多个属性等时它更简洁。

旁注：如果有一个更精确的容器不受您可以使用的ajax更新的影响，我会的。使用body作为容器非常全球化。你说表单是通过ajax替换的，所以你在ajax中更新的容器都可能是一个不错的选择。

带有对象选择器的jQuery委托

1 个答案: