在 jQueryUi 对话框中动态加载的 jQueryUi 选项卡不起作用答案

【问题标题】：jQueryUi tabs loaded dynamically in jQueryUi dialog don't work在 jQueryUi 对话框中动态加载的 jQueryUi 选项卡不起作用
【发布时间】：2012-01-10 22:32:45
【问题描述】：

我有一个 Ruby 和 Rails 应用程序。

我正在使用 Ajax 加载表单。该表单是现有的 Rails 视图。该表单又包含 jQueryUi 选项卡。

不幸的是，当表单加载到 jQuery 对话框中时，选项卡没有显示。

这是对话框的代码

  $('#create_candidate').click( function(e) {
    var url = $(this).attr('href').replace('?','.js?');
    var new_candidate_dlg  = $('<div id="new_candidate_dlg">Loading form ...</div>');

    new_candidate_dlg.load(url);

    new_candidate_dlg.dialog({
      autoOpen:false,
      width: 'auto',
      height: 'auto',
      modal: true,
      close: function() {
        $('new_candidate_dlg').remove();
      },
      open: function() {
        $('#tabs').tabs();
      }
    });
    new_candidate_dlg.dialog('open');
    e.preventDefault();
  });

奇怪的是，如果我像下面这样更改代码，标签确实会出现，但只有当我点击标签时才会出现。

  $('#create_candidate').click( function(e) {
    var url = $(this).attr('href').replace('?','.js?');
    var new_candidate_dlg  = $('<div id="new_candidate_dlg">Loading form ...</div>');

    new_candidate_dlg.load(url);

    new_candidate_dlg.dialog({
      autoOpen:false,
      width: 'auto',
      height: 'auto',
      modal: true,
      close: function() {
        $('new_candidate_dlg').remove();
      },
      open: function() {
        $('#tabs').live('click', function (){
          $(this).tabs()
        });
      }
    });
    new_candidate_dlg.dialog('open');
    e.preventDefault();
  });

【问题讨论】：

标签： jquery ruby-on-rails jquery-ui

【解决方案1】：

您遇到了时间问题。执行顺序大概是这样的：

new_candidate_dlg.load(url)
new_candidate_dlg.dialog(...)。
new_candidate_dlg.dialog('open')。
.load(url) 完成并将 HTML 加载到 new_candidate_dlg。

所以当对话框的open 回调执行时，没有#tabs 元素可用，$('#tabs').tabs() 调用什么也不做。在 load 已加载 HTML 并且 load 有一个可用于此目的的回调之后，您想绑定标签：

new_candidate_dlg.load(url, function() { $('#tabs').tabs() });

然后从您的new_candidate_dlg.dialog({ ... }) 调用中删除open 回调。

此回调有效：

open: function() {
  $('#tabs').live('click', function () {
    $(this).tabs()
  });
}

因为您将 live 用于点击事件（因此，当您调用 $('#tabs').live() 时，#tabs 不必存在）并且您不会点击任何内容，直到它出现在页面上并准备好去吧。

【讨论】：

【解决方案2】：

我是编码新手，但我会试一试。你要么在你的关闭函数中遗漏了一些东西来识别元素（# 代表 id attr），要么你错误地声明了你之前声明的变量。

另外，我认为您的 .dialog() 调用应该与您的 .click() 事件处理程序分开，即在您的脚本中更早。

我通常会看到 e.preventDefault();在事件函数的顶部。您对 open 方法的调用应该用双引号引起来。

当您单击选项卡时，您的第二个示例正在工作，因为它正在触发 .tabs() 方法作为单击事件处理程序。（如果你使用 1.7 之后的 jQuery，live() 将被弃用）

您可以在对话框中发布 html 吗？它会帮助我尝试提供更好的答案。

【讨论】：