如何得到一個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綁定的活選擇器結果？

回答

相關問題