사용자 스크립트로 jQuery 탭 추가

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에서 sandboxing과 관련이 있을지도 모른다라고 생각한다. 그러나 나는 확실히 모른다. 누군가 제발 저를 계몽 해 줄 수 있습니까?

EDIT : 내가 unsafeWindow을 사용하려고하면, 내가 여러 가지 이유 때문에 우선적으로 보안을 원하고 있지 않지만,이 기능을 사용할 수있을 것이라고 생각합니다.

Answer 1

대신

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