如何得到一个jQuery绑定的活选择器结果？

我工作的一些代码在工作中的一个项目，并且也有点难倒的jQuery的细微差别。在下面的代码中，它应该查看我的列表，然后迭代每个文本输入元素，并使用与最后一个相同的通用名称，但名称中有更高的一个数字。相反，它所做的是将每个文本输入元素的名称迭代为创建链接时存在的最后一个数字的一个数字。所以，它应该看起来像一个更复杂的版本，那么这笔：如何得到一个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将函数绑定到“click “事件。有没有什么办法来强制选择要弄清楚什么叫真正的$（“form.wizard UL li.industry：最后输入[类型=文本]”）被点击的元素时的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>

来源

2011-10-31 Code Junkie

我刚刚创建的代码的这个[小提琴]（http://jsfiddle.net/thomas_peklak/4APzT/）（只是复制和粘贴），它就可以工作，因为它应该。名称是使用增加的数字创建的。你使用哪个jQuery版本。 – topek

@topek你的榜样不会比行业2更高...与pareFloast和一个可以一起工作的字符串有什么不同。如果你把它们分开（http://jsfiddle.net/4APzT/1/）它似乎工作正常。出于想法:( –

好吧@topek示例工作，只要你不按第一个增加...这么奇怪..也许有什么与它绑定价值的行动？ –

重新安排script的部分后，它现在似乎工作。

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

来源

2011-10-31 20:53:30 topek

你把一个LI元素以“产品生产技术”和附加的副本吧 - 现在你有一个“产品生产技术”两个锂元素。然后你把最后一个数字（“1”），增加它（到“2”），并将最后一个LI设置为“industry2”。

然后再次单击第一个LI。它制作了一个副本并追加它 - 现在你有{LI name ='industry1'/} {LI name ='industry2'/} {LI name ='industry1'/}。然后你把最后一个数字（“1”），增加它（到“2”），并将最后一个LI设置为“industry2”，导致你最终的意外结果。

来源

2011-10-31 21:07:41 Bruce

如何得到一个jQuery绑定的活选择器结果？

回答

相关问题