如何在jQuery绑定中获得实时选择器结果

Question

我正在为工作中的一个项目编写一些代码，并且有点被jQuery的细微差别难住了。在下面的代码中，它应该查找我的列表并迭代每个具有与上一个相同的通用名称的文本输入元素，但名称中要高一个数字。相反，它所做的是迭代每个文本输入元素的名称，使其比创建链接时存在的最后一个数字高一个数字。因此，它应该看起来像这个的一个更复杂的版本this:

<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绑定到新的add链接时设置的。因此，如果第一个字段的链接创建了第二个字段的按钮，而第三个字段创建了一个按钮，那么它的行为就好像仍然只有一个字段，因为当.live将函数绑定到"click"事件时就是这样。有没有办法强制选择器找出真正的$("形式。巫师李。industry:last input[type=text]")在DOM的状态是，当元素被点击，而不是当它被绑定到元素?

  <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>

Answer 1

重新排列部分脚本后，现在似乎可以工作了。

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

Answer 2

您取了一个带有"industry1"的LI元素并附加了它的副本-现在您有两个带有"industry1"的LI元素。然后取最后一个数字("1")，将其增加到"2"，并将最后一个LI设置为"industry2"。

然后再次单击第一个LI。它复制了那个并追加了它——现在你有{LI name='industry1'/}{LI name='industry2'/}{LI name='industry1'/}。然后取最后一个数字("1")，将其增加到"2"，并将最后一个LI设置为"industry2"，从而得到最终的意外结果。