在動態添加的內容上加載jquery選項卡

Question

所以我正在嘗試在模態窗口中加載選項卡，並且它不會調用JS .tabs()方法，我想知道我做錯了什么：

http://jsfiddle.net/uMTC7/24/

我不知道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僅在單擊按鈕時創建，並且在此之前不可用，因此不會將任何事件綁定到它。

因此，您必須通過附加的所有處理程序傳遞元素。 您可以執行此操作，如下所示，或者您可以在單擊函數中綁定它們並將最終變量傳遞給消息選項。 這里更新了小提琴

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