Javascript代码行为意外

我有一个相对于此代码的问题。它应该（并且它）显示项目列表，您可以通过点击加号和减号来添加和删除条目。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的闭包性质，但我想听到它从更熟练的人那里解释。作为一个侧面说明，如果我用一个单独的方法划分绑定事件的逻辑，它按预期工作...从这个我的犯罪嫌疑人。

来源

2009-12-28 Stefano Borini

在代码中导致此行为的问题是当您将值分配给new_id时，您缺少var语句。

在JavaScript中，当您对未声明的标识符（标识符链中无法访问的标识符）进行分配时，它将变为全局的（创建了window.new_id），这就是为什么它不断递增的原因。

来源

2009-12-28 05:39:49 CMS

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

这只是一个快速响应，但我想知道你正在使用的new_id变量的范围。

来源

2009-12-28 05:46:31

Javascript代码行为意外

回答

相关问题