Question

在这个示例http://jsbin.com/avewul/2/中，我使用了滑动元素的rcarousel jQuery插件

这个想法是通过悬停的幻灯片元素的id属性值来改变下面黑色标题的内容。这只适用于第一个。

如果删除$（document）.ready事件，一切都会好的。但我需要在$（document）.ready事件

中

的javascript：

$(document).ready(function($) {
    var J_text = $(".change").text();

    $(".slide").hover(function(){
        var J_id = $(this).attr("id");
        $(".change").text(J_id);
    }, function(){
        $(".change").text(J_text);
    });

});

Answer 1

使用它应该有效：

$(document).ready(function($) {
    var J_text = $(".change").text();

    $("body").on('mouseenter', '.slide', function(){
      var J_id = $(this).attr("id");
      $(".change").text(J_id);
    }).on('mouseleave', '.slide', function(){
      $(".change").text(J_text);
    });
});

它将幻灯片的mouseenter和mouseleave事件委托给body元素。这样，事件也会针对动态添加的元素执行

Answer 2

似乎carousel插件动态创建和删除幻灯片元素。但是新创建的元素没有绑定到它们的悬停侦听器。

您可以使用rcarousel的pageLoaded回调重新绑定事件：

function pageLoaded(event, data) {
    var target = $('.change');
    var text = target.text();

    $(this).hover(
        function() {
            target.text($(this).attr('id'));
        },
        function() {
            target.text(text);
        }
    );

    …

Answer 3

试，

$(".slide").on("hover", function() {
        var J_id = $(this).attr("id");
        $(".change").text(J_id);
    }, function(){
        $(".change").text(J_text);
});

Answer 4

您可能应该在选项（http://ryrych.github.com/rcarousel/#options）pageLoaded中使用回调函数来在每次幻灯片移动时绑定您的悬停事件。似乎rcarousel解除了每张新幻灯片上的所有事件。

这是一个工作解决方案：http://jsbin.com/upomaf/1

您正在使用rcarousel中的示例文件（HTML部分底部的最后一个<sript>）。如果您这样做，可以将以下内容添加到pageLoaded函数：

$(this).hover(
    function() {
        $(".change").text($(".wrapper > div").attr("id"));
    },
    function() {
         $(".change").text(J_text);
    }
);

在文档就绪事件中获取ajax内容

4 个答案: