Javascript事件处理程序

Question

不要仔细看代码，我会尝试编写伪代码，只是为了理解这个想法和我的问题。所以，想象我有这样的功能（注意var name = $('#name').val();）

function createFolder(button1, button2, element){ 

    var btns = {}; 
    btns[button1] = function(){ 
     var name = $('#name').val(); 
     ..... 
     $(this).dialog("close"); 
    }; 
    btns[button2] = function(){ 
     // Do nothing 
     $(this).dialog("close"); 
    }; 
    $("<form><input type='text' id='name' name='name'/></form>").dialog({ 
     autoOpen: true, 
     title: 'Condition', 
     modal:true, 
     buttons:btns 
    }); 
    } 

基本上它是仅仅指刚进行了对话，这将打开一个表格和2个按钮。

好吧，当DOM加载我的插件激活做一些魔术时，运行公开表<tr>标签和每个<a>标签获取附加到它的事件处理程序。事情是这样的：

function initialize(){ 
    ...Some magic here... 
    ..... 

    node.find('#action-links').children().on('click',function(e){ 
    createFolder(node,'Create Folder', 'Cancle'); 

    } 
    ..... 
} 

会发生什么事是是内createFolder功能我再次调用初始化，以及相同的元素＃动作+链接获得超过1个事件处理程序，当我点击其中第二个被执行多次，第三等时间。我通过删除旧的事件处理程序来处理它。 jquery停止传播方法，据我所知，也有帮助。

我不明白的是为什么当我得到输入值的变量'名称'，第一次它得到它漂亮，但是当我点击第二，第三等时间我总是得到价值我插入第一次而不是我插入的新价值。如果我不在createFolder函数中调用initialize，并且不分配多个事件处理程序，那么一切正常。我认为事件处理程序有问题......但我不能确定。

Answer 1

您不断创建具有相同ID的新表单元素。由于ids应该是唯一的，它似乎只引用您创建的第一个元素。 createFolder函数的最后一部分应该是这样的：

if (!$('#form-name').length) { 
    $('body').append($("<form id='form-name'><input type='text' id='name' name='name'/></form>")) 
} 
$("#form-name").dialog({ 
    // etc 
});