Slider in jQuery (Nivo Slider) does not work when it is inside a content loaded via Ajax

Question

Slider in jQuery (Nivo Slider) does not work when it is inside a content loaded via Ajax

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (-1 votes)

1

I'm using the Nivo Slider plugin to create a slider on my page. If I put the slider structure directly on the page, it loads right ... but if it's inside content loaded via ajax, it just does not appear at all.

What can it be? The funny thing is that the lighbox works, but the slider does not ...

I use this to load the slider:

<script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
</script>

And this is how I call my ajax content:

<script type="text/javascript">
       function startEmpreendimento(e) {
           e.preventDefault();
           var href = "<?php echo $primeiroID; ?>";
           $("#content-empreendimentos").load(href + " #content-empreendimentos");
        }           
       window.onload=startEmpreendimento;

jquery ajax slider

asked by anonymous 09.10.2014 / 02:29

3 answers

How to change the selected option in my 'combobox' from a 'li'? persistence.xml for development and another for production?

score 1 · Answer 1

Places the instance of the slide after loading ajax:

<!DOCTYPE html>
<head>
<!-- Adicione todos os importes necessários -->
<script src="js/ideal-image-slider.js"></script>
<script type="text/javascript">
   jQuery(document).ready(function($) { // Essa função será executada quando a página carregar
      var href = "<?php echo $primeiroID; ?>";

      $("#content-empreendimentos").load(href + " #content-empreendimentos", function(){
         // Esse código será executado quando o load terminar
         $('#slider').nivoSlider();
      });

   });
</script>
</head>
<body>
   <div id="slider">...</div>
</body>
</html>

DEMO

score 0 · Answer 2

Brother, the DOM is dynamic, always remember this. You need to fire nivoslider only after loading the content in your div ... Here, you're telling jquery, when you finish loading the page, do this with this div, and that's not what you want. p>

You want that when the div is loaded with your objects coming from the ajax will be triggered the nivoslider.

score -1 · Answer 3

-1

I think you need to use delegate: link It has happened to me other times, but with the click, that after loading a page via AJAX it stopped working ...

09.10.2014 / 12:42