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函数中我再次调用initialize，同一个元素#action + link获取多个事件处理程序，当我点击第二个，第三个等时，它会多次执行。我通过删除旧的事件处理程序处理它。并且jquery停止传播方法，只要我尝试也有帮助。

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

Answer 1

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

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

Javascript事件处理程序

1 个答案: