Script conflict

Asked

Viewed 470 times

0

I am developing a website and for page transitions, using $.get() from Jquery and modifying only the center of index.html, without the page reloading. However, some features of the code snippets that I include require scripts, which are also used in index.html, but for them to work, I must include them again in the code snippet that I’m including. I got a big problem with that, 'cause there’s been some conflict.

An example: I use a script to make something in my header work. The moment I include in index.html a chunk of code (coming from a $.get() at runtime) that will also use this same script, it does not "take" this script, so I have to include it separately (and repeatedly). However, when I include, there is conflict, as repetition of effects and the like.

What should I do to not have to do this?

EDITED:

Upon request, I place parts of the code that are having conflict.

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>

Having index.html, shown above, I have files. html, such as "principal.html", "contato.html", which are called by this code snippet in.js control

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

Paging works perfectly, however, if any elements coming from the next files use any of the index.html scripts, they don’t take. To do this, I have to add this snippet to all the . html I add to the div content:

    <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>

However, when I add this excerpt, "fixed" functionalities of index.html, which use the scripts of index.html itself, begin to have conflicts, such as repetition of effects and not functioning of some functionalities.

javascript jquery script get
  • 1

    What are the conflicts? your question is not clear

  • 1

    Hello Rene! Welcome to Stack Overflow! In order for the community to help you, it is important to explain your problem in detail. If you can include snippets of code, great! If it can be executed, even better! Read more here. Further information on how to ask and answer is available at Help center.

  • You can tell which scripts give conflict and what functionality they do?

  • Friends, the codes have been added. Thank you very much!

  • The codes have been added guys

1 answer

1

Try associating events to a larger element, rather than associating them to elements within the index.html.

Ex: Let’s say that at the click of an item in a list, you want it to perform a certain action, so you might be setting it that way:

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

The problem with this is that the event is associated with the screen’s elmento, so when inserting a new one you would need to watch the event to this new elmento, but if you do so in the following way (considering that, on the screen, there is an element with the class content that is not removed)

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

Each click on an item of content, it will scroll through the children to verify which one of them was clicked, as it scrolls through the children at each click, it is OK if an element was added later.

  • I don’t think that’s exactly it, man, but thanks for the help. Codes have been added to the post so you guys understand a little better. Thank you very much!

Browser other questions tagged javascript jquery script get

You are not signed in. Login or sign up in order to post.