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

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

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

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

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 的示例文件（<sript>HTML 部分底部的最后一个文件）。如果你接受它，你可以在pageLoaded函数中添加以下内容：

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