在div中动态创建div以及DOM元素的变量访问

Question

我正在尝试创建div元素，并在单击它时创建一个新元素。在我的情况下，新元素是一个样式的元素。当点击元素时，它在元素内创建新的元素。我通过使用一个大功能来完成这项工作，但我试图构建我的代码。我的新结构是澄清，但呈现给我的问题。

下面的代码工作除了当我点击灰色的圆圈，它不会创建一个新的小绿色圆圈，这是它应该做的。我得到的错误说合成器变量不可访问。但是，当我将合成器变成全局变量时，我又遇到了另一个问题，我只能启动一次函数...，因此我不能创建多个灰色圆圈。

所以总之，我认为诀窍是让合成器变量局部和全局可访问（或者至少可以访问需要它的函数......全局变量是坏的！）从我读过的这个是完美的案例使用封闭。然而，我对封闭的理解是朦胧的，我认为这可能是我最好的例子，让我能够真正掌握其中的一个，并且“真正理解它”，假设我可以导致水这么说。下面是代码以及带有html和css元素的JS小提琴。

我想我可以通过将一个函数传递给一个参数来解决这个问题（一些如何），但我总是好奇其他人比我更有经验解决问题和结构代码。

谢谢

http://jsfiddle.net/taoist/rfFtY/1/

$(function() { 

var orangeButton; 
var applicationArea = document.getElementById("applicationArea"), 
orangeButton = document.getElementById("orangeButton"), 
counter = 1; 




var createSynth = function() { 
    var synth = document.createElement("p"); 
    synth.id = "synth" + (counter++); 
    applicationArea.appendChild(synth); 
    $(synth).draggable({ snap: true }); 
    $(synth).draggable({ grid: [ 20,20 ]}); 


}; 



var createParameter = function() { 
    var synthParams = document.createElement("li"); 
    synthParams.id = "synthParams" + (counter++); 
    synth.appendChild(synthParams); 
    $(synthParams).draggable({ snap: true }); 
    $(synthParams).draggable({ grid: [ 20,20 ] }); 

}; 




orangeButton.addEventListener("click",createSynth, false); 
synth.addEventListener("dblclick",createParameter, false); 



}); 

Answer 1

我会解决这个问题是这样的：

var createSynth = function() { 
    var synth = document.createElement("p"); 
    synth.id = "synth" + (counter++); 
    applicationArea.appendChild(synth); 
    $(synth).draggable({ snap: true }); 
    $(synth).draggable({ grid: [ 20,20 ]}); 
    synth.addEventListener("dblclick",createParameter, false); 

}; 

我添加的事件监听器在这个函数结束时合成器，所以每次创建合成器可以对事件做出反应。

var createParameter = function() { 
    var synthParams = document.createElement("li"); 
    synthParams.id = "synthParams" + (counter++); 
    this.appendChild(synthParams); 
    $(synthParams).draggable({ snap: true }); 
    $(synthParams).draggable({ grid: [ 20,20 ] }); 
}; 

orangeButton.addEventListener("click",createSynth, false); 

我用“this”而不是“synth”。由于createParameter将处理特定合成器的事件，因此该合成器将在该函数中变为“this”。

的jsfiddle：http://jsfiddle.net/sU3uy/1/