Question

为什么这段代码：

var jQueryString="div.data > div.item > div.quantity,div.article,div.price > :input";  
$(jQueryString).live("click", function(event) { alert(this); });

输出[object HTMLDivElement]而不是[object HTMLInputElement]？

JSFiddle example here

我知道这是与selector-find-live-returning-the-parent-from-a-multiple-selector类似的问题，但我想要一个更好的解决方案（获取我想要只修改jQueryString的HTML元素）。

更新

这是一个教学理解的代码示例，我不能接受像“每个INPUT定义一个jquery搜索字符串”这样的解决方案，因为实际代码中有一小部分INPUTS。

@Sotiris的答案太接近完美了。

更新

完美的解决方案是:: jQuery, Real :not operator equivalent
=感谢所有人：P =

Answer 1

因为在你的选择器中你没有选择三个输入而是两个div和一个输入。

div.data > div.item > div.quantity选择div

div.article选择div.article

以下选择输入

div.price > :input

在以下演示中，您可以看到所有人都使用[object HTMLInputElement]提醒"div.data > div.item > div.quantity > :input,div.article > :input,div.price > :input"

演示： http://jsfiddle.net/FDNMD/7/

Answer 2

您应该使用以下行，因为逗号不会按预期嵌套：

var jQueryString =  "#quantity, #article, #price";

请看这个小提琴：http://jsfiddle.net/FDNMD/4/

您的CSS选择器以这种方式解释：

div.data > div.item > div.quantity, /* Select DIV with class quantity*/
div.article, /* Select div with class article */
div.price > :input /* Select input element which is a child of div.price */

ID应该只出现一次。由于您已经为这些元素定义了ID属性，因此可以使用ID选择器而不是嵌套选择器。

更新

逗号分隔整个选择器。请考虑以下现实语言：

智能选择包括a，b，c，d，e

在CSS中，你不能像这样构造“句子”。相反，您必须再次指定整个选择器：

聪明的选择包括a，
  聪明的选择包括b，
  ...等

CSS：

root a, b, c {} /*You did probably not want this*/

/*Desired selector set: */
root a, root b, root c {}
/* More readable: */
root a,
root b,
root c {}

This page 也可能对您感兴趣（不是逗号，而是CSS选择器）：

Answer 3

试试这个。

http://jsfiddle.net/FDNMD/6/

多个div选择器由于某种原因打破它

Answer 4

如果删除multipe div元素（div.article，div.price），它可以正常工作。如，

var jQueryString="div.data > div.item > div.quantity > :input";
$(jQueryString).live("click", function(event) { alert(this); });

这是运营商优先的问题。 div列表中的逗号具有与您期望的不同的优先级。

为了进一步证明我的观点，我看了你的例子，我注意到在第三个按钮上它确实正常工作。 jQuery将您的表达式解释为3个子表达式：

div.data＆gt; div.item＆gt; div.quantity
div.article
div.price＆gt; ：输入

jQuery：嵌套的Multiple Selector意外行为

4 个答案:

更新