Question

我有一个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();
  });

Answer 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() });

然后从open来电中删除new_candidate_dlg.dialog({ ... })回调。

此回调有效：

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

因为您使用live进行点击事件（因此当您致电#tabs时$('#tabs').live()不一定存在）并且您不会点击任何内容在页面上准备好了。

Answer 2

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

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

我通常会看到e.preventDefault（）;在事件功能的顶部。您对open方法的调用应该是双引号。

单击选项卡时，第二个示例正在工作，因为它将.tabs（）方法作为单击事件处理程序触发。（如果您使用比1.7更新的jQuery，则不推荐使用live（））

你可以在对话框中发布html吗？这有助于我提供更好的答案。

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

2 个答案: