用Userscript添加jQuery選項卡

Question

我正在使用tampermonkey/Greasemonkey腳本將我自己的用戶腳本添加到網頁，並且正在尋找向設置頁面添加額外選項卡。這些選項卡最初是使用jQuery UI選項卡（頁面加載）構建的。我遇到的問題是，當我嘗試自己調用相同的選項卡函數以輕鬆添加選項卡時，它們似乎不起作用。事實上，他們似乎什麼都不做，沒有發生任何錯誤。

這似乎是所有相關代碼的建立標籤（與建立在一個單獨的CSS文件中的類

<script> 
    $(function() { 
     $("#optionTabs").tabs(); 
     $("#optionTabs").tabs('select', 0); 
     $("#optionTabs").css("display", "block"); 
    }); 
</script> 

<div id="optionTabs" style="display: block;" class="ui-tabs"> 
    <ul class="ui-tabs-nav"> 
     <li class="ui-state-default ui-tabs-selected"> 
      <a href="#optionTabs-1">Gameplay</a> 
     </li> 
     <li class="ui-state-default"> 
      <a href="#optionTabs-2">User Interface</a> 
     </li> 
     <li class="ui-state-default"> 
      <a href="#optionTabs-3">NEW TAB</a> 
     </li> 
    </ul> 

    <div id= "optionTabs-1" class="ui-tabs-panel"> 
     content 
    </div> 
    <div id= "optionTabs-2" class="ui-tabs-panel ui-tabs-hide"> 
     some content 
    </div> 
    <div id= "optionTabs-3" class="ui-tabs-panel ui-tabs-hide"> 
     MY CONTENT 
    </div> 
</div> 

我試着用下面的代碼，沒有成功。

$('div #optionTabs ul').append('<li class="ui-state-default"><a href="#optionTabs-3">NEW TAB</a></li>') 
$('div #optionTabs').append('<div id="optionTabs-3" class="ui-tabs-panel ui-tabs-hide">MY CONTENT</div>') 
$('#optionTabs').tabs('refresh') 

前兩行工作正常; div和ul添加正確，我可以在HTML中看到它，但是我實際上無法點擊該標籤並使其正常工作。與一個解決方法工作，但我覺得那裏更簡單，更有效的方式做我在做什麼（忽略明顯減少jQuery選擇的）：

$('[href = "#optionTabs-3"]').parent().on('click', function(){ 
    $('div [id*="optionTabs-"]').not('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide'); //hide current page 
    $('#optionTabs-3').attr('class', 'ui-tabs-panel'); //display my content 
    $('[class*="ui-state-default ui-tabs-selected"').attr('class','ui-state-default'); //make current active tab normal 
    $('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default ui-tabs-selected'); //make my tab look active 

}) 
$('[href *="optionTabs-"').not('#optionTabs-3').on('click', function(){ 
    $('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide'); 
    $('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default'); //make my tab look INactive 
}) 

再次，雖然這工作，我不知道爲什麼，我已經看到工作簡單的方法（即。附加一些內容和刷新選項卡，而不是定義我自己的事件處理程序）在這裏不起作用。我認爲這可能與Tampermonkey/Greasemonkey的沙盒有關，但我不確定。有人請賜教嗎？

編輯：我認爲，如果我嘗試使用unsafeWindow，我可能會得到這個工作，但我不想出於各種原因，首先是安全性。

Answer 1

嘗試.live代替。對

$('[href = "#optionTabs-3"]').parent().live('click', function(){ 
    $('div [id*="optionTabs-"]').not('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide'); //hide current page 
    $('#optionTabs-3').attr('class', 'ui-tabs-panel'); //display my content 
    $('[class*="ui-state-default ui-tabs-selected"').attr('class','ui-state-default'); //make current active tab normal 
    $('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default ui-tabs-selected'); //make my tab look active 

}) 
$('[href *="optionTabs-"').not('#optionTabs-3').live('click', function(){ 
    $('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide'); 
    $('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default'); //make my tab look INactive 
})