如何重新加载javascript但不能重新加载页面

Question

I have a problem with a slider. When I load the first time my Web page, it shows a slider with some images. I have some links to change the images to show, so when I click, I want to display as a slider the other ones. The problem is that when I click on the new link, it doesn't use the jquery function to format the slider.

Here I paste some code so you can figure out:

<div class="contenidor_escaparates_2011">
    <div id="contenidor_slider" class="containerGaleria">
        <ul id="slideshow">
              <li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li>
              <li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li>
              <li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li>
</ul> </div></div>

And then the jquery:

$(document).ready(function()
{
    var timeout, manualMode = false,

            $slideshow = $('#slideshow'),
    $items = $slideshow.find('li').hide(),
    total = $items.length,
    getItem = function($item, trav) {
        var $returnItem = $item[trav]();
        return $returnItem.length ?
            $returnItem :
            $items[(trav == 'next') ? 'first' : 'last']();
    },

    showItem = function($currentItem, $itemToShow) {
        var $itemToShow =
            $itemToShow || getItem($currentItem,'next');

        $currentItem.fadeOut(300, function() {
            $itemToShow.fadeIn(300, fadeCallback);
        });
    },

    fadeCallback = function() {
        if (manualMode) { return; }

        var $this = $(this),
            $next = getItem($this, 'next'),
            num = $this.prevAll().length + 1;


        // set the timeout for showing
        // the next item in 5 seconds
        timeout = setTimeout(function() {
            showItem($this, $next);
        }, 3000);
    },

    handleBtnClick = function(e) {
        clearTimeout(timeout);

        manualMode = true;

        var $currentItem = $items.filter(':visible'),
            $itemToShow = getItem($currentItem, e.data.direction);

        showItem($currentItem, $itemToShow);
    };

    $items.eq(0).fadeIn(500, fadeCallback);

});

This works perfect for the first time I load the page, but when I change the content with this:

<script type="text/>
$('#nuestra_tienda_show').click(function()
    {
     $('.containerGaleria').html('');
     $('<ul id="slideshow"><li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li><li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li><li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li><li><img src="img/Escaparates_2011/img4.jpg" alt="Escaparate Junio 2011." /></li><li><img src="img/Escaparates_2011/img5.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img6.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img7.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img8.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img9.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img10.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img11.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img12.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img13.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img14.jpg" alt="" /></li></ul> ')
         .prependTo('.containerGaleria');
         $('#galeria_seleccionada').html('Nuestra tienda 2011');
         location.reload();
         });
</script>

So basically, what I do is, after an onclick() event on some link, I change the html content of a div, but obviously, it doesn't use the jquery, as it wasn't loaded at first. Any idea on how to solve this?

If I use location.reload(); it shows the first items I had inside, so it doesn't work for me...

EDIT:
Wait, I edit the jsFiddle...

Answer 1

You need to create an init method for your slideshow and recall that when you need to.

I want to gag seeing how this js is set up so I will ignore it and post how I would have handled it:

$(document).ready(function(){
    slideshow.init();

    $('#nuestra_tienda_show').on('click', function()
    {
        $('.containerGaleria').html('');
        $('<ul id="slideshow"><li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li><li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li><li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li><li><img src="img/Escaparates_2011/img4.jpg" alt="Escaparate Junio 2011." /></li><li><img src="img/Escaparates_2011/img5.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img6.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img7.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img8.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img9.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img10.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img11.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img12.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img13.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img14.jpg" alt="" /></li></ul> ')
        .prependTo('.containerGaleria');
        $('#galeria_seleccionada').html('Nuestra tienda 2011');
        slideshow.init();
    });
});

var slideshow = {
    timeout: null,
    manualMode: false,
    total: 0,
    init: function(){
        clearTimeout(this.timeout);
        var items = $('#slideshow').find('li').hide();
        this.total = items.length;
        items.eq(0).fadeIn(500, this.fadeCallback);
    },
    getItem: function(item, trav) {
        var returnItem = item[trav]();
        return returnItem.length ?
            returnItem :
            items[(trav == 'next') ? 'first' : 'last']();
    },
    showItem: function(currentItem, itemToShow) {
        var itemToShow =
            itemToShow || this.getItem(currentItem,'next');

        currentItem.fadeOut(300, function() {
            itemToShow.fadeIn(300, this.fadeCallback);
        });
    },
    fadeCallback: function() {
        if (manualMode) { return; }

        var $this = $(this),
            next = getItem($this, 'next'),
            num = $this.prevAll().length + 1;

        // set the timeout for showing
        // the next item in 5 seconds
        timeout = setTimeout(function() {
            this.showItem($this, next);
        }, 3000);
    },
    handleBtnClick: function(e) {
        clearTimeout(this.timeout);

        this.manualMode = true;

        var currentItem = items.filter(':visible'),
            itemToShow = this.getItem(currentItem, e.data.direction);

        this.showItem(currentItem, itemToShow);
    },
    handleBtnClick: function(e) {
        clearTimeout(this.timeout);

        this.manualMode = true;

        var currentItem = items.filter(':visible'),
            itemToShow = this.getItem(currentItem, e.data.direction);

        this.showItem(currentItem, itemToShow);
    };
};

Then you would just call slideshow.init() when you want to re-evaluate the slideshow content.

I didn't thoroughly audit this but the general idea is to turn this massive chain of vars into a single js object and contain the whole thing.

I cannot understand why you would write the contents of the slideshow like this in the click function. You're wiping the html of the container, creating the elements, then prepending them to the container and rewriting the title id with the same string over and over. Why not just set the html of the slideshow to the new images?

$('#slideshow').html('<li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li><li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li><li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li><li><img src="img/Escaparates_2011/img4.jpg" alt="Escaparate Junio 2011." /></li><li><img src="img/Escaparates_2011/img5.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img6.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img7.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img8.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img9.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img10.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img11.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img12.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img13.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img14.jpg" alt="" /></li>');