Question

当创建滑块内的新元素没有运气时，我一直试图用jQuery幻灯片委托事件。

这是我的HTML：

<div id="slides">
    <div> 1 </div>
    <div> 2 </div>
    <div> 3 </div>
</div>

在JS中我创建了一个滑块：

function init() {
    $('#slides').slidesjs({
    height: 100,
    navigation: {
        active: false
        },
        pagination: {
            active: false
        },
        play: {
            active: true,
            interval: 2000
        }
    });
}

init();

我尝试在鼠标悬停时启动幻灯片并停止鼠标离开，这是我的代码：

$(document).on('mouseover', "#slides", function() {
     console.log('mouseover');
     $(".slidesjs-play").trigger('click');
});

$(document).on('mouseleave', "#slides", function() {
     console.log('mouseover');
     $(".slidesjs-stop").trigger('click');
});

它工作正常，但我需要做一些过滤并添加幻灯片项目dinamicaly，如：

$("#redraw").on('click', function() {
    var slides = $('#slides').clone();
    $('#slides').empty();
    $('#slides').append(slides);
});

此后我的滑块不适用于mouseenter / mouseleave。我看到事件被触发（console.log()有效），但滑块不会重新开始。

我尝试过的事情：

在鼠标悬停中添加init()
$(this).find(".slidejs-play").trigger('click');
滑块的不同插件（jquery循环）。

我相信它一定是小事，但我无法把握它。

HTML

<div id="slides">
    <div> 1 </div>
    <div> 2 </div>
    <div> 3 </div>
</div>

<button id="redraw">  Redraw </button>

的JavaScript

$(function() {

    $(document).on('mouseover', "#slides", function() {
         console.log('mouseover');
         $(".slidesjs-play").trigger('click');
    });

    $(document).on('mouseleave', "#slides", function() {
         console.log('mouseover');
         $(".slidesjs-stop").trigger('click');
    });

    $("#redraw").on('click', function() {
        var slides = $('#slides').clone();
        $('#slides').empty();
        $('#slides').append(slides);
    });

    function init() {
        $('#slides').slidesjs({
        height: 100,
        navigation: {
            active: false
            },
            pagination: {
                active: false
            },
            play: {
                active: true,
                interval: 2000
            }
        });

    }

    init();

});

JSFiddle

无法使用jQuery幻灯片委托事件

0 个答案: