如何在 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”时的情况。 “ 事件。有没有什么方法可以强制选择器弄清楚当元素被单击时 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>
I'm working on a bit of code for a project at work, and am kind of stumped on a nuance of jQuery. In the following code, It should look down my list and iterate each text input element with the same general name as the last one, but with one number higher in the name. Instead what it's doing is iterating the name of each text input element with one number higher than the last number that existed when the link was created. So, it should look like a more complicated version of this 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>
...And instead, it looks like this:
<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>
I think the problem is that the line which selects the value to iterate is set when .live binds to the new add link. So, if the link by the first field creates the button by the second field, and the one by the third field, it acts as if there was still only one field because that's how it was when .live bound a function to the "click" event. Is there any way to force the selector to figure out what the real $("form.wizard ul li.industry:last input[type=text]") in the state of the DOM when the element is clicked is, rather than when it is bound to the element?
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
重新排列部分脚本后，现在似乎可以工作了。
我发现的主要问题是，字段被附加并立即使用
$("form.wizard ul li.industry:last input[type=text]")进行选择。这就是为什么数字始终是单击的元素 + 1。After rearranging parts of the script, it now seems to work.
The main problem that I identified was, that the fields were appended and immediately selected with
$("form.wizard ul li.industry:last input[type=text]"). That's why the number was always the clicked element + 1.您获取了一个带有“industry1”的 LI 元素并附加了它的副本 - 现在您有两个带有“industry1”的 LI 元素。然后，您获取最后一个的编号（“1”），将其递增（到“2”）并将最后一个 LI 设置为“industry2”。
然后再次单击第一个 LI。它会复制该副本并附加它 - 现在您有 {LI name='industry1' /}{LI name='industry2' /}{LI name='industry1' /}。然后，您获取最后一个的编号（“1”），将其递增（到“2”）并将最后一个 LI 设置为“industry2”，从而产生最终的意外结果。
You took an LI element with "industry1" and appended a copy of it - now you have two LI elements with "industry1". Then you took the number of the last one ("1"), increment it (to "2") and set the last LI to "industry2".
Then you click the first LI again. It makes a copy of that one and appends it - now you have {LI name='industry1' /}{LI name='industry2' /}{LI name='industry1' /}. Then you take the number of the last one ("1"), increment it (to "2") and set the last LI to "industry2", resulting in your final unexpected result.