在 Ajax 调用之后使 jquery 插件工作答案

【问题标题】：Making jquery plugins work after an Ajax call在 Ajax 调用之后使 jquery 插件工作
【发布时间】：2012-07-31 23:17:45
【问题描述】：

这将是一个很长的帖子，但我真的受够了试图解决这个问题。我真的在寻求一些帮助来解决我的问题。

第一：

fade.js:

$(document).ready(function(){
$(".gallery ul li img.a").fadeTo("slow", 0.5); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".gallery ul li img.a").hover(function(){
    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
    $(this).fadeTo("slow", 0.5); // This should set the opacity back to 30% on mouseout
});
});

这里的问题是在下一页的ajax调用之后，淡入淡出停止工作。所以我做的是

$(document).ready(function(){
$(".gallery ul li img.a").fadeTo("slow", 0.5); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".gallery ul li img.a").live("hover", function(){
    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
    $(this).fadeTo("slow", 0.5); // This should set the opacity back to 30% on mouseout
    });
});

但这只有在我将鼠标悬停在图像上时才会起作用，然后图像就会淡出。如果我对$(".gallery ul li img.a").fadeTo 到.live(...) 执行相同操作，则没有任何反应，它根本行不通。

即使在 ajax 调用之后，它应该如何在加载时淡出，然后当我将鼠标悬停在它上面时淡出。

第二：

我有一个小滑块，可以在图像上向上滑动，slider.js：

$(document).ready(function(){
    //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Full Caption Sliding (Hidden to Visible)
        $('.gallery li').hover(function(){
            $(".cover", this).stop().animate({top:'106px'},{queue:false,duration:160});
        }, function() {
            $(".cover", this).stop().animate({top:'153px'},{queue:false,duration:160});
        });
    });

我将$('.gallery li').hover(...) 更改为$('.gallery li').live("hover", function(){...})，但还是不行。我还使用了.on 而不是.live，因为它已被弃用。

我做错了什么？我不是客户端的家伙，我的大部分工作都是服务器端的。我只需要在 AJAX 调用发生后让这 2 个插件工作。

阿贾克斯：

@dajaxice_register
def gallerypages(request, p):

try:
    page = int(p)
except:
    page = 1

items = gallerylist(page)
html = render_to_string('gallery_content.html',
                                {'items': items,}, 
                                context_instance = RequestContext(request))

dajax = Dajax()
dajax.assign('#gallery-content', 'innerHTML', html)
return dajax.json()

编辑2：

<a href="#" onclick="Dajaxice.gallery.gallerypages(Dajax.process, {'p': {{ items.previous_page_number }},})" class="btn_prev"><b>&lt;</b></a>

和

$(document).on("keydown", "#pagenumber", function(e)
    if ( e.which === 13 ) {
    Dajaxice.gallery.gallerypages(Dajax.process, {'p': this.value});
}});

【问题讨论】：

Ajax 调用到底在做什么？
对不起，我没有提到这一点，Ajax 调用只会在图库中加载下一页，我有一个 div 中的图像列表。
在ajax调用完成后重新运行fade.js。
ajax调用完成后如何重新运行？只是指出我使用的是 Dajax 而不是 Ajax，它是 Django 的 Ajax。它有点不同，没有成功或什么。如果我可以在通话后运行一个函数，我现在会检查一下。
我希望它有一个活动:)

标签： javascript jquery django dajaxice dajax

【解决方案1】：

live 的发展方向正确，但 live 因on 事件而贬值。使用on，您可以将选择器作为参数之一。最初的 jQuery 选择器只是您要添加处理程序的对象的容器。

<div id="content">
    <div class="sombutton"></div>
</div>

$( document ).ready( function() {
   $( '#content' ).on( 'click', '.somebutton', function() {
      alert( 'do something' );
   } );
} );

现在即使我们替换#conent div 中的内容，新添加的类.somebutton 的内容也将附加一个点击处理程序。

http://api.jquery.com/on/

【讨论】：

另外，如果您不使用 jQuery 将内容添加到页面，我不确定 on 事件是否按预期工作。也许尝试使用 jQuery 来做 ajax 并将内容加载到 div 中。
为了清楚起见，您不必将选择器传递给on()。如果要直接在元素上注册侦听器，则无需传递选择器。当你想要一个委托事件注册时，你传递一个选择器，在这种情况下这可能对 OP 有好处，尽管我真的无法理解他们的代码。

【解决方案2】：

我不确定，但测试一下：

通过 jQuery 编写的 JavaScript

var initFade = function() {
    $(".gallery ul li img.a").fadeTo("slow", 0.5);
}

// your custom callback method
var reBindStuffs = function(data) {
    Dajax.process(data);
    // rebind your jquery event handlers here... e.g.
    initFade();
};

$(document).ready(function(){

    // initial first time loaded fade
    initFade();

    // hover live binder
    $(".gallery ul li img.a").live("hover", function(){
        $(this).fadeTo("slow", 1.0);
    },function(){
        $(this).fadeTo("slow", 0.5);
    });

    // document keydown listener 
    $(document).on("keydown", "#pagenumber", function(e)
        if ( e.which === 13 ) {
        Dajaxice.gallery.gallerypages('reBindStuffs', {'p': this.value});
    }});
});

HTML

<!-- a click listener -->
<a href="#" onclick="Dajaxice.gallery.gallerypages(reBindStuffs, {'p': {{ items.previous_page_number }},})" class="btn_prev"><b>&lt;</b></a>

【讨论】：

我现在试了一下，但似乎没有用，甚至 dajax 都停止工作了。
使用reBindStuffs 代替'reBindStuffs' 并再次测试
我真的不知道该怎么感谢你。我根本不知道。非常感谢您的帮助。

【解决方案3】：

你说的问题很大，我手动刷新。但我也使用 .ajaxcomplete 功能。它在每次 Ajax 查询之后运行

$(document).ajaxComplete(function(){ 
    // Carga tabs por defecto por clases.
    if (typeof jQuery.fn.wf_responsivetab == 'function')
    {
        if ($('#rbtt_1').length)
        {
            $('#rbtt_1').wf_responsivetab({text: '...',});
            $(window).on('resize', function() {$('#rbtt_1').wf_responsivetab({text: '...',});});
        }
    }
});

【讨论】：