Добавить вкладки jQuery с помощью Usercript

Question

Я использую сценарий 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> 

Я пытался использовать следующий код, чтобы не увенчались успехом:.

$('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, но я не знаю точно. Может кто-нибудь, пожалуйста, просветит меня?

EDIT: Я думаю, что если я попытаюсь использовать unsafeWindow, я мог бы заставить его работать, хотя я не хочу по целому ряду причин, в первую очередь быть безопасностью.

Answer 1

попробовать .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 
})