使用Userscript添加jQuery选项卡

我正在使用tampermonkey/Greasemonkey脚本将我自己的用户脚本添加到一个网页中，我希望在设置页面中添加一个额外的选项卡。这些选项卡最初是使用jQuery UI选项卡（在pageload上）构建的。我遇到的问题是，当我尝试自己调用相同的选项卡函数来轻松添加选项卡时，它们似乎不起作用。事实上，他们似乎什么也不做，没有犯任何错误

这似乎是建立选项卡的所有相关代码（类建立在单独的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>

同样，尽管这样做有效，但我不知道为什么我所看到的更简单的方法有效（即添加一些内容和刷新选项卡，而不是定义自己的事件处理程序）不要在这里工作。我想这可能与Tampermonkey/Greasemonkey的沙箱有关，但我不确定。有人能告诉我吗

---

编辑：我认为，如果我尝试使用

unsafeWindow

，我可能能够让它工作，尽管出于各种原因，首先也是最重要的安全原因，我不想这样做。

尝试使用.live而不是.on

$('[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
})

---

如果我没记错的话，

.live

已被弃用，

.on

是现在附加事件处理程序的正确方法吗？

$('[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
})

$('[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
})