jQueryUI对话框-只要我向应用程序添加第二个对话框，它就会中断？

我已将jQuery UI对话框添加到我的Rails 3 web应用程序中，如下所示：

 permissions = $('<div id="dialog-content"></div>')
.html('<div class="notification"><h4>Loading...</h4></div>')
.dialog({
    autoOpen: false,
    dialogClass: 'dialog',
    width: 460,
    minHeight: 80,
    position: ['center',130],
    open: function() {
        $.ajax({url: '/stuff/'})
    },
    close: function() {
        $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
    }       
});

$(".teammember-dialog").live("click",function(){
    permissions.dialog('open');
    return false;
});

 dialogstuff2 = $('<div id="dialog-content"></div>')
.html('<div class="notification"><h4>Loading...</h4></div>')
.dialog({
    autoOpen: false,
    dialogClass: 'dialog',
    width: 460,
    minHeight: 80,
    position: ['center',130],
    open: function() {
        $.ajax({url: '/stuff/'})
    },
    close: function() {
        $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
    }       
});

$("#addlink").live("click",function(){
    dialogstuff2.dialog('open');
    return false;
});

permissions=$（“”）
.html（'正在加载…'）
.对话({
自动打开：错误，
dialogClass:“dialog”，
宽度：460，
身高：80，
位置：[‘中间’，130]，
打开：函数（）{
$.ajax（{url:'/stuff/'}）
},
关闭：函数（）{
$（'#对话框内容'）.html（'加载…'）；
}       
});
$（“.teammember dialog”）.live（“单击”，函数（）{
权限对话框（“打开”）；
返回false；
});

令我困惑的是，我刚刚在我的应用程序中添加了另一个对话框，如下所示：

 permissions = $('<div id="dialog-content"></div>')
.html('<div class="notification"><h4>Loading...</h4></div>')
.dialog({
    autoOpen: false,
    dialogClass: 'dialog',
    width: 460,
    minHeight: 80,
    position: ['center',130],
    open: function() {
        $.ajax({url: '/stuff/'})
    },
    close: function() {
        $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
    }       
});

$(".teammember-dialog").live("click",function(){
    permissions.dialog('open');
    return false;
});

 dialogstuff2 = $('<div id="dialog-content"></div>')
.html('<div class="notification"><h4>Loading...</h4></div>')
.dialog({
    autoOpen: false,
    dialogClass: 'dialog',
    width: 460,
    minHeight: 80,
    position: ['center',130],
    open: function() {
        $.ajax({url: '/stuff/'})
    },
    close: function() {
        $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
    }       
});

$("#addlink").live("click",function(){
    dialogstuff2.dialog('open');
    return false;
});

dialogstuff2=$（“”）
.html（'正在加载…'）
.对话({
自动打开：错误，
dialogClass:“dialog”，
宽度：460，
身高：80，
位置：[‘中间’，130]，
打开：函数（）{
$.ajax（{url:'/stuff/'}）
},
关闭：函数（）{
$（'#对话框内容'）.html（'加载…'）；
}       
});
$（“#添加链接”）.live（“单击”，函数（）{
dialogstuff2.对话框（“打开”）；
返回false；
});

对于第二个对话框，它会打断两个对话框。它们都会打开，但不会响应对话框调用Web服务器时加载的JS。如果我去掉第二个，第一个就可以了。但是当这两个都在页面上时，当我单击加载其中一个时，对话框将保持静止，默认加载文本为“加载…”

---

有人见过这个吗？谢谢

我在您的代码中注意到的一件事是，两个对话框都有一个外部div，id为

dialog content

。您可能希望使它们有所不同，看看会发生什么，因为浏览器/jQuery可能不喜欢这样。

我注意到在您的代码中，两个对话框都有一个外部div，id为

dialog content

。您可能想让它们与众不同，看看浏览器/jQuery可能不喜欢这样会发生什么。

这就是优秀的经典软件工程与JavaScript一起使用的地方。创建一个对话框生成器方法，该方法利用内部唯一标识符创建所需的对话框集

function dialogBuilder(url){
  var uuid = 0;
  var name = 'dialog_' + uuid++;
  var $elem = $('<div id="' + name + '"></div>')
  .html('<div class="notification"><h4>Loading...</h4></div>')
  .dialog({
    autoOpen: false,
    dialogClass: 'dialog',
    width: 460,
    minHeight: 80,
    position: ['center',130],
    open: function() {
      $.ajax({url: '/stuff/'})
    },
    close: function() {
      $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
    }       
  });
  return $elem;
}
var permissions = dialogBuilder('/stuff/');
var dialogstuff = dialogBuilder('/stuff/');

函数对话框生成器（url）{
var-uuid=0；
变量名称='对话框\'+uuid++；
变量$elem=$（''）
.html（'正在加载…'）
.对话({
自动打开：错误，
dialogClass:“dialog”，
宽度：460，
身高：80，
位置：[‘中间’，130]，
打开：函数（）{
$.ajax（{url:'/stuff/'}）
},
关闭：函数（）{
$（'#对话框内容'）.html（'加载…'）；
}       
});
返回$elem；
}
var permissions=dialogBuilder（'/stuff/'）；
var dialogstuff=dialogBuilder（'/stuff/'）；

你明白了，下一个明显的步骤是在外面建立名字，这样你就可以做这样的事情：

var dialogHandler = {};
function dialogBuilder(dname, url, anchor){
  var uuid = 0;
  var name = 'dialog_' + dname;
  if(dialogHandler[name]){
    var $elem = dialogHandler[name].dialog({open:function(){$.ajax(url)}});
    dialogHandler[name] = $elem;
  }else{
    var $elem = $('<div id="' + name + '"></div>')
    .html('<div class="notification"><h4>Loading...</h4></div>')
    .dialog({
      autoOpen: false,
      dialogClass: 'dialog',
      width: 460,
      minHeight: 80,
      position: ['center',130],
      open: function() {
        $.ajax({url: '/stuff/'})
      },
      close: function() {
        $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
      }       
    });
    dialogHandler[name] = $elem;
  }
  $(anchor).live('click',function(){
    dialogHandler[name].dialog('open');
    return false;
  })
}

// to call this above code:
dialogBuilder('dialogstuff2','/stuff/','#addlink');
dialogBuilder('permissions','/stuff/','.teammember-dialog');

var dialogHandler={}；
函数对话框生成器（dname、url、锚定）{
var-uuid=0；
变量名称='对话框\'+dname；
if（dialogHandler[名称]）{
var$elem=dialogHandler[name].dialog（{open:function（）{$.ajax（url）}}）；
dialogHandler[name]=$elem；
}否则{
变量$elem=$（''）
.html（'正在加载…'）
.对话({
自动打开：错误，
dialogClass:“dialog”，
宽度：460，
身高：80，
位置：[‘中间’，130]，
打开：函数（）{
$.ajax（{url:'/stuff/'}）
},
关闭：函数（）{
$（'#对话框内容'）.html（'加载…'）；
}       
});
dialogHandler[name]=$elem；
}
$（anchor.live（'单击'，函数（））{
dialogHandler[name]。对话框（'open'）；
返回false；
})
}
//要调用上述代码：
dialogBuilder（'dialogstuff2'、'/stuff/'、'#addlink'）；
dialogBuilder（'permissions'、'/stuff/'、'.teammember dialog'）；

---

编写但未经测试。

这就是优秀的经典软件工程与JavaScript一起使用的地方。创建一个对话框生成器方法，该方法利用内部唯一标识符创建所需的对话框集

function dialogBuilder(url){
  var uuid = 0;
  var name = 'dialog_' + uuid++;
  var $elem = $('<div id="' + name + '"></div>')
  .html('<div class="notification"><h4>Loading...</h4></div>')
  .dialog({
    autoOpen: false,
    dialogClass: 'dialog',
    width: 460,
    minHeight: 80,
    position: ['center',130],
    open: function() {
      $.ajax({url: '/stuff/'})
    },
    close: function() {
      $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
    }       
  });
  return $elem;
}
var permissions = dialogBuilder('/stuff/');
var dialogstuff = dialogBuilder('/stuff/');

函数对话框生成器（url）{
var-uuid=0；
变量名称='对话框\'+uuid++；
变量$elem=$（''）
.html（'正在加载…'）
.对话({
自动打开：错误，
dialogClass:“dialog”，
宽度：460，
身高：80，
位置：[‘中间’，130]，
打开：函数（）{
$.ajax（{url:'/stuff/'}）
},
关闭：函数（）{
$（'#对话框内容'）.html（'加载…'）；
}       
});
返回$elem；
}
var permissions=dialogBuilder（'/stuff/'）；
var dialogstuff=dialogBuilder（'/stuff/'）；

你明白了，下一个明显的步骤是在外面建立名字，这样你就可以做这样的事情：

var dialogHandler = {};
function dialogBuilder(dname, url, anchor){
  var uuid = 0;
  var name = 'dialog_' + dname;
  if(dialogHandler[name]){
    var $elem = dialogHandler[name].dialog({open:function(){$.ajax(url)}});
    dialogHandler[name] = $elem;
  }else{
    var $elem = $('<div id="' + name + '"></div>')
    .html('<div class="notification"><h4>Loading...</h4></div>')
    .dialog({
      autoOpen: false,
      dialogClass: 'dialog',
      width: 460,
      minHeight: 80,
      position: ['center',130],
      open: function() {
        $.ajax({url: '/stuff/'})
      },
      close: function() {
        $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
      }       
    });
    dialogHandler[name] = $elem;
  }
  $(anchor).live('click',function(){
    dialogHandler[name].dialog('open');
    return false;
  })
}

// to call this above code:
dialogBuilder('dialogstuff2','/stuff/','#addlink');
dialogBuilder('permissions','/stuff/','.teammember-dialog');

var dialogHandler={}；
函数对话框生成器（dname、url、锚定）{
var-uuid=0；
变量名称='对话框\'+dname；
if（dialogHandler[名称]）{
var$elem=dialogHandler[name].dialog（{open:function（）{$.ajax（url）}}）；
dialogHandler[name]=$elem；
}否则{
变量$elem=$（''）
.html（'正在加载…'）
.对话({
自动打开：错误，
dialogClass:“dialog”，
宽度：460，
身高：80，
位置：[‘中间’，130]，
打开：函数（）{
$.ajax（{url:'/stuff/'}）
},
关闭：函数（）{
$（'#对话框内容'）.html（'加载…'）；
}       
});
dialogHandler[name]=$elem；
}
$（anchor.live（'单击'，函数（））{
dialogHandler[name]。对话框（'open'）；
返回false；
})
}
//要调用上述代码：
dialogBuilder（'dialogstuff2'、'/stuff/'、'#addlink'）；
dialogBuilder（'permissions'、'/stuff/'、'.teammember dialog'）；

---

已编写但未测试。

谢谢，这似乎是个问题。但是拥有不同的身份证似乎不是很枯燥？有没有一种方法可以让它使用相同的ID工作，这样就不会因为我的应用程序可能会有多个对话框而变得非常混乱？。。。此外，许多对话框设置都是相同的，是否有一种方法可以为所有对话框设置这些设置，只需添加自定义对话框属性，如每个对话框的post URL？对于DRY，ID在页面中是唯一的，因此浏览器和jQuery将利用这些设置来提高性能，或者出于其他原因。也许把身份证换了