Question

我正在为一个正在运行的项目编写一些代码，并且对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>

Answer 1

重新排列script的部分后，它现在似乎有效了。

我发现的主要问题是，字段已追加并立即选中$("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”，从而产生最终的意外结果。

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

2 个答案: