Scripting Conflict

Question

Scripting Conflict

Navigation

#1 by (1 votes)

0

I'm developing a site and for page transitions, using $ .get () from JQuery and just change the center of the 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 snippet of code I am including. I'm having a big problem with this because there are some conflicts.

An example: I use a script to do something in my header to work. When I add a code snippet (from a $ .get () at runtime) that will also use that same script, it does not "catch" this script, so I have to include it in it separately ( and repeatedly). However, when I include, there is conflict, such as repetition of effects and the like.

What should I do to avoid having to do this?

EDITED:

Upon request, I put parts of the code that are having the 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><scriptsrc="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 the index.html, shown above, I have .html files, such as "main.html", "contact.html", which are called by this code snippet in control.js

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

The pagination works perfectly, however, if any element coming from the next files uses some of the index.html scripts, they do not catch. For this, I have to add this snippet in all .html that I add in the content div:

    <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><scriptsrc="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 section, "fixed" features of index.html, which use index.html's own scripts, start having conflicts, such as repeating effects and not working some features.

javascript jquery script get

asked by anonymous 26.10.2015 / 03:42

1 answer

How to calculate the first 4 bytes of an Address ex: 00F28758 The @Form annotation of RestEasy does not work in Glassfish 4.1

score 1 · Answer 1

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

Ex: Let's say that in the click of an item in a list, you want it to perform a certain action, so you might be defining it like this:

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

The problem with this is that the event is associated with the screen element, so when inserting a new one you would need to join the event to this new element, but if you do it as follows (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 go through the children to check which one was clicked, how it traverses the children in each click, no problem if an element was added later.