Onde colocar ações jQuery para páginas carregadas externas por guias da interface do usuário

Question

Estou me perguntando onde devo definir minhas ações jQuery para páginas carregadas externamente pelas guias da interface do usuário.

Por exemplo, eu tenho uma página index.html, incluindo 3 guias. OnClick cada guia Carregará extern1.html, extern2.html, extern3.html. Essas três páginas externas precisam de várias ações de jQuery (ações de Onload, OnClick-Atrações e muito mais).

Quando coloco todo o código jQuery para as páginas externas no índice e carrego uma das páginas externas, esse código jQuery não afetará a página carregada externa quando clicar em uma guia.

Quando eu coloco todo o código jQuery para as páginas externas na própria página externa, isso causará problemas (eu acho), porque quando eu carrego uma página de guia/externa várias vezes, ele carregará o código do jQuery repetidamente, certo?

Então, onde eu tenho que colocar meu código jQuery? (algum exemplo?)

Muito Obrigado!

Answer 1

Você pode colocar seu código no manipulador de eventos carregado de guias:

$('.your-tabs-container').tabs({
   load: function(event, ui) { /* your code here */ }
});

ou:

$('.your-tabs-container').bind('tabsload', function(event, ui) {
  /* your code here */
});

Nesses casos, de acordo com a documentação, você pode recuperar as informações necessárias da interface do usuário de ui argumento:

ui.tab     // anchor element of the selected (clicked) tab
ui.panel   // element, that contains the selected/clicked tab contents
ui.index   // zero-based index of the selected (clicked) tab

Answer 2

Coloque seu jQuery na mãe html e use .live() função para vincular os eventos que você queria. documentos aqui.

Answer 3

Você deve incluir apenas a biblioteca jQuery uma vez! Na sua página de índice. Nas páginas externas, você deve incluir o JavaScript usado para a página externa individual:

Índice:

• Inclua JQuery Library

Externo 1:

• JQuery Funções relevantes para a página 1 externa 1

Externo 2:

• JQuery Funções relevantes para a página externa 2

É assim que eu faria :-)