事件不会添加到 for 循环中 [英] Event doesn't get added in a for-loop
问题描述
这是html.如果单击链接,我想用一些文本替换它前面的跨度元素.
This is the html. If a link is clicked I want to replace the span-element in front of it with some text.
<p><span id="sp1">that1</span> <a href="#" id="update1">Update1</a></p>
<p><span id="sp2">that2</span> <a href="#" id="update2">Update2</a></p>
<p><span id="sp3">that3</span> <a href="#" id="update3">Update3</a></p>
<p><span id="sp4">that4</span> <a href="#" id="update4">Update4</a></p>
<p><span id="sp5">that5</span> <a href="#" id="update5">Update5</a></p>
如你所见,我的想法是给 spans en 锚点相同的 id 和一个数字.
As you can see, my idea was to give the spans en the anchors identical id's and a number.
在我的 jquery 代码中,我遍历所有的锚元素,给它们一个点击事件,导致它前面的跨度元素被替换.
In my jquery-code I loop through all the anchor-elements, give them a click-event that causes the span-element in front of it to be replaced.
<script type="text/javascript" >
$(document).ready(function() {
var numSpans = $("span").length;
for (n=0;n<=numSpans;n++) {
$("a#update" + n).click(function(e){
$('span#sp' + n).replaceWith('this');
e.preventDefault();
});
}
});
</script>
由于某种原因,这不起作用.
For some reason this does not work.
我做错了什么?
推荐答案
原始代码的问题在于您正在对变量 n
创建闭包.当事件处理程序被调用时,它是在调用点而不是声明点使用 n
的值调用的.您可以通过添加警报呼叫来查看这一点:
The problem with your original code is that you're creating a closure on the variable n
. When the event handler is called, it is called with the value of n
at the point of invocation, not the point of declaration. You can see this by adding an alert call:
$(document).ready(function() {
var numSpans = $("span").length;
for (n = 1; n <= numSpans; n++) {
$("a#update" + n).click(function(e) {
alert(n); //Alerts '6'
$('span#sp' + n).replaceWith('this');
e.preventDefault();
});
}
})
解决此问题的一种方法是在每次迭代中对 n 的值创建一个闭包,如下所示:
One way to fix this is to create a closure on the value of n in each iteration, like so:
$(document).ready(function() {
var numSpans = $("span").length;
for (n = 1; n <= numSpans; n++) {
$("a#update" + n).click(
(function(k) {
return function(e) {
alert(k);
$('span#sp' + k).replaceWith('this');
e.preventDefault();
}
})(n)
);
}
})
但是,这很麻烦,您最好使用更 jQuery-y 的方法.
However, this is messy, and you'd do better to use a more jQuery-y method.
执行此操作的一种方法是从您的代码中删除 id
.除非您需要它们用于其他用途,否则它们不是必需的:
One way to do this would be to remove the id
s from your code. Unless you need them for something else, they're not required:
<p><span>that1</span> <a href="#" class="update">Update1</a></p>
<p><span>that2</span> <a href="#" class="update">Update2</a></p>
<p><span>that3</span> <a href="#" class="update">Update3</a></p>
<p><span>that4</span> <a href="#" class="update">Update4</a></p>
<p><span>that5</span> <a href="#" class="update">Update5</a></p>
jQuery:
$(function() {
$('a.update').live('click', function() {
$(this).siblings('span').replaceWith("Updated that!");
});
});
这篇关于事件不会添加到 for 循环中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!