Jquery选项卡在对话框内部不工作

我正在使用JQuery对话框，希望在其中集成一些选项卡，但这些选项卡不起作用。在有打开对话框的链接的页面上，我加载了JQuery。但是JQuery似乎没有加载到对话框中

我是否需要再次包含内联JavaScript脚本标记？对话框不是从它下面的页面继承JQuery库吗

编辑：

以下是我正在加载到对话框中的内容：

<script type="text/javascript">
  $(function() {
    $("#admin").tabs();
  });
</script>
<div id="admin">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>

  <div id="tab1">
    tab1
  </div>

  <div id="tab2">
    tab2
  </div>

  <div id="tab3">
    tab3
  </div>
</div>

$（函数（）{
$（“#admin”）.tabs（）；
});





表1
表2
表3

对我来说似乎还可以，如果需要进一步帮助，您需要发布代码。我唯一要做的就是为对话框指定一个增加的高度和宽度，以便更好地显示内容

我能想到的唯一复杂的事情是，如果您通过AJAX加载对话框的内容，那么

$（document）.ready（）

可能无法正确初始化选项卡

JSFIDLE示例：

动态加载对话框内容 这是根据您提供的其他信息进行的编辑

所以你的基本想法是这样做：

<button type="button" id="my-link">Load Me!</button>
<div id="dialog">
    <div id="dialog-content">
    </div>
</div>


$(document).ready(function() {
    $('#my-link').click(function () {
        //Begin loading your content however you do it.
        //In this case I'm using AJAX because it's one of the most common ways to dynamically load content in JavaScript
        $.get('http://url-to-your-content.com/my-template', '',
            //We can use an anonymous function as our callback function, or define it seperately then call it here.
            //$.get() will call it, and put the contents of my-template in the result variable for us to use.
            function (result) {
                //Insert the result into the div ID dialog-content (I'm assuming the fetched data is HTML).
                var dialog_content = $('#dialog-content');
                dialog_content.html(result);
                //Now, render the HTML in dialog-content as JUI tabs
                dialog_content.tabs();
                //How display your dialog box
                $('#dialog').dialog();
            }, 'html');
    });

    $('#tabs').tabs();
    $('#modal').dialog({
        height: 500,
        width: 600,
    });
});

单击链接/按钮，这将触发您的代码以获取对话框的内容

希望您拥有的代码能够让您通过所谓的。在这里，您可以指定一个函数，该函数将在内容完成加载（或任何其他任务）后自动调用

在回调函数中，您可以初始化选项卡并显示对话框

比如说：

<button type="button" id="my-link">Load Me!</button>
<div id="dialog">
    <div id="dialog-content">
    </div>
</div>


$(document).ready(function() {
    $('#my-link').click(function () {
        //Begin loading your content however you do it.
        //In this case I'm using AJAX because it's one of the most common ways to dynamically load content in JavaScript
        $.get('http://url-to-your-content.com/my-template', '',
            //We can use an anonymous function as our callback function, or define it seperately then call it here.
            //$.get() will call it, and put the contents of my-template in the result variable for us to use.
            function (result) {
                //Insert the result into the div ID dialog-content (I'm assuming the fetched data is HTML).
                var dialog_content = $('#dialog-content');
                dialog_content.html(result);
                //Now, render the HTML in dialog-content as JUI tabs
                dialog_content.tabs();
                //How display your dialog box
                $('#dialog').dialog();
            }, 'html');
    });

    $('#tabs').tabs();
    $('#modal').dialog({
        height: 500,
        width: 600,
    });
});

加载我！
$（文档）.ready（函数（）{
$（“#我的链接”）。单击（函数（）{
//开始加载你的内容，不管你怎么做。
//在本例中，我使用AJAX是因为它是动态加载JavaScript内容的最常用方法之一
$.get（'http://url-to-your-content.com/my-template', '',
//我们可以使用匿名函数作为回调函数，或者单独定义它，然后在这里调用它。
//$.get（）将调用它，并将模板的内容放入结果变量中供我们使用。
功能（结果）{
//将结果插入divid对话框内容（我假设获取的数据是HTML）。
var dialog_content=$（“#dialog content”）；
dialog_content.html（结果）；
//现在，将对话框内容中的HTML呈现为JUI选项卡
对话框_content.tabs（）；
//如何显示对话框
$（'#dialog'）。dialog（）；
}","html";；
});
$（“#tabs”）.tabs（）；
$（“#模态”）。对话框({
身高：500，
宽度：600，
});
});

我这样做了：

$("#try").dialog({
      autoOpen: false,
      open: function (){
            var url = "view.html";
            $("#try").load(url, function(){
                $("#tabs").tabs();
            }); 
      },
});
$("#open_tab").click(function() {
     $("#try").dialog('open');
     }
);

index.html：

<div id="try" title="Tabs On Dialog">
</div><input type="submit" id="open_tab" value="Open">

view.html：

<div id="tabs">
<ul>
    <li><a href="#tabs-1">tab 1</a></li>
    <li><a href="#tabs-2">tab 2</a></li>
    <li><a href="#tabs-3">tab 3</a></li>
</ul>

<div id="tabs-1">
    test 1
</div>

<div id="tabs-2">
    test 2
</div>

<div id="tabs-3">
    test 3
</div>

测试1
测试2
测试3

---

打开对话框后需要初始化选项卡，否则选项卡无法正确初始化。@KevinB，谢谢Kevin。我要把我的代码贴在上面。如果我做错了什么，请告诉我。@NaN您的代码看起来不完整，您似乎只被代码的“选项卡”部分覆盖。您如何设置对话？谢谢。我通过模板系统将对话框内容拉入。我不确定这是否会产生影响。@Nan我肯定你能。只需启用“脚本”选项卡并在JavaScript中的相应点设置断点，然后像其他调试器一样逐步执行代码。@很难说模板引擎是否会影响任何内容而不查看代码。我无法想象为什么，只要HTML和Javascript在加载页面之前同时被混合在一起。我建议您包含用于设置jQuery UI对话框的代码。@Nan确定。那么从您所说的，模板引擎仅在单击链接时动态地将选项卡加载到对话框中，而不是在初始页面加载期间？在这种情况下，我相信document ready不会在这方面帮助您。您是否能够设置在模板引擎加载完内容后的回调，然后才呈现/显示您的对话框？再次感谢，Geekman。您的回答是对的，内容是在初始页面加载后动态加载的。事情是这样的，我对JQuery真的很陌生，每天都在进步，但我很惭愧地承认我真的不知道在回调中包括什么（你能给我举个例子吗？它需要做什么？