如何在 jQuery 绑定中获取实时选择器结果？答案

【问题标题】：How to get live selector results in a jQuery bind?如何在 jQuery 绑定中获取实时选择器结果？
【发布时间】：2011-11-01 05:07:41
【问题描述】：

我正在为工作中的一个项目编写一些代码，并且对 jQuery 的细微差别感到困惑。在下面的代码中，它应该查看我的列表并迭代每个文本输入元素，其通用名称与最后一个相同，但名称中的数字高一个。相反，它所做的是用比创建链接时存在的最后一个数字高一个数字来迭代每个文本输入元素的名称。所以，它应该看起来像这个更复杂的版本：

<input name="industry1" /> <a href="#" class="addField"></a> <!-- Clicked twice -->
<input name="industry2" /> <a href="#" class="addField"></a>
<input name="industry3" /> <a href="#" class="addField"></a>

...相反，它看起来像这样：

<input name="industry1" /> <a href="#" class="addField"></a> <!-- Clicked twice -->
<input name="industry2" /> <a href="#" class="addField"></a>
<input name="industry2" /> <a href="#" class="addField"></a>

我认为问题在于选择要迭代的值的行是在 .live 绑定到新的添加链接时设置的。因此，如果第一个字段的链接通过第二个字段创建按钮，并且通过第三个字段创建一个按钮，它的行为就好像仍然只有一个字段，因为当 .live 将函数绑定到“点击”时就是这样“ 事件。有没有什么办法可以强制选择器找出点击元素时DOM状态中真正的 $("form.wizard ul li.industry:last input[type=text]") 是什么，而不是什么时候它是绑定到元素上的吗？

  <script type="text/javascript">
   $(function() {
    $("a.addField").live("click", function(event) {
     $(this).parents("li").clone().appendTo($("form.wizard > ul"))
     .children("input[type=text]").val("").attr("name", function() {
      return "industry" + (parseFloat($("form.wizard ul li.industry:last input[type=text]").attr("name").replace("industry", "")) + 1);
     })
     .after(function() {
       if($(this).siblings(".removeField").length == 0) {
        return "<a href='#' class='removeField'>Remove</a>"
       }
     })
     .siblings("label").text("");
     event.preventDefault();
    });
    $("a.removeField").live("click", function(event) {
     $(this).parents("li").remove();
     event.preventDefault();
    });
   });
  </script>


 <form action="#" method="post" class="wizard">
  <ul>
   <li>
    <label>Your company name</label>
    <input type="text" />
    <div class="clear"></div>
   </li>
   <li class="industry">
    <label>Your Industry</label>
    <input type="text" name="industry1" />
    <a href="#" class="addField left">Add</a>
    <div class="clear"></div>
   </li>
  </ul>
 </form>

【问题讨论】：

我刚刚为您的代码创建了这个fiddle（只需复制和粘贴），它就可以正常工作。创建名称时添加升序数字。您使用哪个 jQuery 版本。
@topek 您的示例并没有高于行业2... pareFloast 和一个可以一起工作的字符串的东西。如果您将它们分开（jsfiddle.net/4APzT/1），它似乎工作正常。没有想法:(
好的 @topek 示例只要你不按第一个添加就可以工作......太奇怪了.. 也许它会将值绑定到操作？
这是因为当您单击第一个 LI 时，它就是复制的那个，所以您总是附加行业 1，然后始终将其递增到行业 2 - 无论现在多次单击第一个 LI。我说的和下面的回答一样啰嗦一点。

标签： jquery dom-manipulation

【解决方案1】：

在重新排列 script 的部分内容后，它现在似乎可以工作了。

我发现的主要问题是，字段被附加并立即使用$("form.wizard ul li.industry:last input[type=text]") 选择。这就是为什么数字总是被点击的元素 + 1。

【讨论】：

【解决方案2】：

您使用“industry1”获取了一个 LI 元素并附加了它的副本 - 现在您有两个带有“industry1”的 LI 元素。然后你取最后一个的编号（“1”），将其递增（到“2”）并将最后一个 LI 设置为“industry2”。

然后再次单击第一个 LI。它会复制那个副本并附加它 - 现在您有了 {LI name='industry1' /}{LI name='industry2' /}{LI name='industry1' /}。然后取最后一个的编号（“1”），将其递增（到“2”）并将最后一个 LI 设置为“industry2”，从而得到最终的意外结果。

【讨论】：