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

Question

我有一个滑块问题。 当我第一次加载网页时，它会显示一个带有一些图像的滑块。 我有一些链接可以更改要显示的图像，因此当我单击时，我想将其他图像显示为滑块。 问题是，当我单击新链接时，它不使用jquery函数来格式化滑块。

我在这里粘贴一些代码，以便您找出：

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

然后是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);

});

第一次加载页面时，这很完美，但是当我更改内容时：

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

因此，基本上，我要做的是，在某个链接上的onclick（）事件之后，我更改了div的html内容，但是显然，它没有使用jquery，因为它最初并未加载。 关于如何解决这个问题的任何想法？

如果我使用location.reload（）; 它显示了我里面的第一批物品，因此对我不起作用...

编辑：
等等，我编辑jsFiddle ...

Answer 1

您需要为幻灯片创建一个init方法，并在需要时调用它。

我想看看这个js是如何设置的，所以我将忽略它并发布如何处理它：

$(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);
    };
};

然后，当您要重新评估幻灯片内容时，只需调用slideshow.init()即可。

我没有对此进行彻底的审核，但是总体思路是将庞大的var链转换为单个js对象并包含整个对象。

我不明白为什么您要在点击功能中像这样写幻灯片的内容。 您要擦除容器的html，创建元素，然后将它们放在容器之前，并一遍又一遍地用相同的字符串重写title id。 为什么不只是将幻灯片的html设置为新图像？

$('#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>');