我有一个相对于此代码的问题。它应该(并且它)显示项目列表,您可以通过点击加号和减号来添加和删除条目。Javascript代码行为意外
<html><head><script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
app={};
app.attachList = function() {
return {
_current_id : 0,
addFilterAfter : function(after_entry_id) {
that = this;
new_id = this._newId();
jQuery("#entry_"+after_entry_id).after("<li id=\"entry_"
+new_id+"\"><a href=\"javascript:void(0);\" id=\"entry_"
+new_id+"_add\">(+)</a><a href=\"javascript:void(0);\">(-)</a> hello "
+new_id+"</li>");
jQuery("#entry_"+new_id+"_add")
.bind("click", function() {
that.addFilterAfter(new_id);
}
);
},
show : function() {
that = this;
new_id = this._newId();
jQuery("#list").children().remove();
jQuery("#list").append("<li id=\"entry_"
+new_id+"\"><a href=\"javascript:void(0);\" id=\"entry_"
+new_id+"_add\">(+)</a> hello </li>");
jQuery("#entry_"+new_id+"_add")
.bind("click", function() {
alert(new_id); // HERE
that.addFilterAfter(new_id);
}
);
},
_newId : function() {
this._current_id++;
return this._current_id;
},
};
}
app.main = function() { l = app.attachList(); l.show(); }
google.setOnLoadCallback(function() { jQuery.noConflict(); jQuery(document).ready(app.main); });
</script>
<ul id="list" /></ul>
</head>
</html>
我的问题是相对于在标有HERE的行发生的情况。理想情况下,如果我点击第一个项目+,我希望这个代码继续添加到第一个项目的下方。这不会发生。它会继续递增new_id(正如您从警报中看到的那样),而不是保留授予的原始new_id。
现在,我怀疑发生了什么事情,主要涉及javascript的闭包性质,但我想听到它从更熟练的人那里解释。作为一个侧面说明,如果我用一个单独的方法划分绑定事件的逻辑,它按预期工作...从这个我的犯罪嫌疑人。
ARGHHHHHHHHH! :D – 2009-12-28 05:41:27
谢谢。我认为new_id被保存为函数内this._current_id的引用。相反,我只是指一个该死的全球:)。但后来我不明白为什么,当我在不同的方法例程中隔离bind()调用时,它正常工作。 – 2009-12-28 05:45:08
但是,经验教训。我不会在我的javascript生活中忘记'var'。 – 2009-12-28 05:46:11