Question

所以我正在尝试在模态窗口中加载制表符，并且它不会调用JS .tabs()方法我想知道我做错了什么：

我不知道bootstrap tab()方法之间是否存在冲突，但我认为这可能是一种可能性。

$('.launcher').on('click',function() {

var domhtml ='<div id="tabs">'+
'<ul>'+
'<li><a href="#tabs-1">Nunc tincidunt</a></li>'+
'<li><a href="#tabs-2">Proin dolor</a></li>'+
'<li><a href="#tabs-3">Aenean lacinia</a></li>'+
'</ul>'+
'<div id="tabs-1"><p>Tab 1 Stuff</p></div>'+
'<div id="tabs-2">'+
'<p>Tab 2 Stuff</p></div>'+
'<div id="tabs-3"><p>Tab 3 Stuff</p></div></div>';


               BootstrapDialog.show({
            title: 'Draggable Dialog',
            message: domhtml,
            draggable: true,
                        buttons: [{
                label: 'Cloze',
                cssClass: 'btn-primary',
                action: function(dialog){
                    dialog.close();
                }
            }]
        });    
    //this does not load:
    $( "#tabs" ).tabs();

});

Answer 1

文档准备好后，您的脚本将立即开始执行，将所有事件绑定到相应的元素。由于您的div＃tabs仅在单击按钮时创建，并且在此之前不可用，因此不会将任何事件绑定到它。

因此，您必须使用附加的所有处理程序传递元素。您可以如下所示执行此操作，也可以在单击函数中绑定它们，并将最终变量传递给消息选项。更新了小提琴here

BootstrapDialog.show({
            title: 'Draggable Dialog',
            message: function(dialog){
                var $content = $(domhtml);
                $($content).tabs();
                return $content;
            },
            draggable: true,
                        buttons: [{
                label: 'Cloze',
                cssClass: 'btn-primary',
                action: function(dialog){
                    dialog.close();
                }
            }]
        });

在动态添加的内容上加载jquery选项卡

1 个答案: