0

Estou desenvolvendo um site e para transições de páginas, utilizando $.get() do JQuery e modifico apenas o centro da index.html, sem que a página recarregue. Porém, algumas funcionalidades dos trechos de códigos que incluo necessitam de scripts, que também são utilizados na index.html, porém, para que funcionem, devo incluí-los novamente no trecho de código que estou incluindo. Estou com um grande problema nisso, pois está havendo alguns conflitos.

Um exemplo: Utilizo um script para fazer algo no meu cabeçalho funcionar. No momento em que incluo no index.html um trecho de código (vindo de um $.get() em tempo de execução) que também utilizará esse mesmo script, ele não "pega" esse script, então tenho que incluir nele, separadamente (e repetidamente). Porém, quando incluo, há o conflito, como repetição de efeitos e afins.

O que devo fazer para não precisar fazer isso?

EDITADO:

A pedidos, coloco partes do código que estão tendo o conflito.

INDEX.HTML

<!doctype html>
<html>
   <head>
      ...
      ...
   </head>
   <body>
      <div class="conteudo">
           <!-- AQUI É ONDE É SUBSTITUIDO O TRECHO PUXADO PELO $.get() -->
      </div>
   </body>

   <script src="js/jquery-1.11.0.min.js"></script>

   <script src="js/bootstrap.min.js"></script>
   <script src="js/jquery.bxslider.min.js"></script>
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
   <script src="js/owl.carousel.js"></script>
   <script src="js/modernizr.js"></script>
   <script type="text/javascript" src="js/skrollr.min.js"></script>
   <script src="js/functions.js"></script>

   <script src="controller/controle.js"></script> <!-- SCRIPT RESPONSÁVEL POR CONTROLAR O MENU E LEVAR OS TRECHOS DE CÓDIGO PARA A DIV CONTEUDO -->
</html>

Tendo a index.html, mostrada acima, tenho arquivos .html, como "principal.html", "contato.html", que são chamados por esse trecho de código no controle.js

$.get("view/principal.html", function(view){ $("#conteudo").html(view); });

A paginação funciona perfeitamente, porém, se algum elemento vindo dos próximos arquivos utiliza algum dos scripts da index.html, eles não pegam. Para isso, tenho que adicionar esse trecho em todos os .html que adiciono na div conteúdo:

    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.bxslider.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="js/modernizr.js"></script>
    <script type="text/javascript" src="js/skrollr.min.js"></script>
    <script src="js/functions.js"></script>

Porém, quando adiciono esse trecho, funcionalidades "fixas" da index.html, que utilizam os scripts da própria index.html, começam a ter conflitos, como repetição de efeitos e não funcionamento de algumas funcionalidades.

5
  • 1
    Quais são os conflitos? sua pergunta não está clara Commented 26/10/2015 às 2:44
  • 1
    Olá René! Seja bem vindo ao Stack Overflow! Para que a comunidade possa te ajudar, é importante que se explique detalhadamente o seu problema. Se puder incluir trechos do código, ótimo! Se ele puder ser executado, melhor ainda! Leia mais aqui. Outras informações sobre como perguntar e responder, estão disponíveis na Central de ajuda.
    – Daniel
    Commented 26/10/2015 às 3:16
  • Podes dizer quais são os scripts que dão conflito e a funcionalidade que fazem?
    – Sergio
    Commented 26/10/2015 às 6:25
  • Amigos, os códigos foram adicionados. Muito obrigado! Commented 26/10/2015 às 14:51
  • Os códigos foram adicionados galera Commented 2/11/2015 às 21:43

1 Resposta 1

1

Tente associar os eventos a um elemento maior, ao invéz de associar aos elementos dentro da index.html.

Ex: Digamos que no clique de um item de uma lista, você queira que ele execute uma determinada ação, então pode ser que você esteja definindo assim:

$('li').on('click', function(e){
    //evento
})

O problema disso é que o evento fica associado ao elmento da tela, então ao inserir um novo você precisaria assiciar o evento a esse novo elmento, mas se você fizer da seguinte forma (considerando que, na tela, há um elemento com a classe content que não é removido)

$('.content').on('click', 'li', function(e){
    //evento
})

A cada clique em um item de content, ele vai percorrer os filhos pra verificar qual deles foi clicado, como ele percorre os filhos em cada clique, não tem problema se um elemento foi adicionado posteriormente.

1
  • Acho que não é exatamente isso, cara, mas agradeço pela ajuda. Códigos foram adicionados à postagem para que vocês entendam um pouco melhor. Muito obrigado! Commented 26/10/2015 às 14:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .