使jQuery插件在Ajax调用后起作用 [英] Making jquery plugins work after an Ajax call

问题描述

这将是一个很长的职位，但我真的有足够的努力解决这个问题。

首先：

fade.js ：

  $（document）.ready （）{
 $（。gallery ul li img.a）。fadeTo（slow，0.5）; //当页面加载$ b时，设置缩略图的不透明度降至30％ $ b $（。gallery ul li img.a）。hover（function（）{
 $（this）.fadeTo（slow，1.0）; //这应该将不透明度设置为100％ hover 
}，function（）{
 $（this）.fadeTo（slow，0.5）; //这应该将不透明度设置为mouseout上的30％
}）; 
}）; 
  

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

  $（document）.ready（function（）{
 $（ img.a）。fadeTo（slow，0.5）; //这样设置缩略图缩小到30％，当页面加载
 $（。gallery ul li img.a ）.live（hover，function（）{
 $（this）.fadeTo（slow，1.0）; //应该将悬浮的不透明度设置为100％
}，function ）{
 $（this）.fadeTo（slow，0.5）; //这应该将不透明度设置为mouseout 
}）; 
}）; 
  

但是，只有当我将鼠标悬停在图像上，然后图像才会淡出。如果我对 $（。gallery ul li img.a）做同样的事情，fadeTo 到 .live（...）没有任何反应，它根本不起作用。

• 即使在ajax调用之后，如何使这项工作当它加载时淡出，然后当我将鼠标悬停在其上时就会淡出。

第二：

我有一个滑块向上滑过图像， slider.js ：

  $（document）.ready（function（）{
 //要切换方向向上/向下和向左/向右，只需在顶部/左侧属性
 //全部标题滑动（隐藏到可见）
 $（'。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'）。 。）到 $（'。gallery li'）。live（hover，function（）{...}）没有工作。另外，我使用 .on 而不是 .live ，因为它已被弃用。

$ b $我做错了什么？我不是客户端的兄弟，我的大部分工作是服务器端。在AJAX调用发生后，我只需要使这两个插件工作。

Ajax：

 $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ 
 
 
 
 $ b $ 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（）
  

Edit2：

 < 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}）; 
}}）; 
  

解决方案

我不确定，但测试这个东西：

JavaScript通过jQuery

  var initFade = function（）{
 $（。gallery ul li img.a）。fadeTo（slow，0.5）; 
} 
 
 //您的自定义回调方法
 var reBindStuffs = function（data）{
 Dajax.process（data）; 
 //重新绑定你的jquery事件处理程序...例如
 initFade（）; 
}; 
 
 $（document）.ready（function（）{
 
 //初始第一次加载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 href =＃onclick =Dajaxice.gallery.gallerypages（reBindStuffs，{'p'：{{items.previous_page_number}}}}class =btn_prev>< b> &安培; LT;< / b>< / A> 
  

It's gonna be a long post, but I really had enough of trying to fix this. I'm really looking for some help solving my case.

First:

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

The problem here is after the ajax call of the next page, the fade stops working. So what I did is

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

But this will only work when I hover over the image then the image will fade out. If I do the same for $(".gallery ul li img.a").fadeTo to .live(...) nothing happens, it simply doesn't work.

• how can make this work even after an ajax call, which is supposed to fadeto when it loads then fadeout when i hover over it.

Second:

I have a small slider that slides up on the image, 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});
        });
    });

I changed $('.gallery li').hover(...) to $('.gallery li').live("hover", function(){...}) but still it didn't work. Also I used .on instead of .live because it's deprecated.

What am I doing wrong ? I'm not a client side dude, most of my work is server side. I just need to make these 2 plugins work after the AJAX call happens.

Ajax:

@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()

Edit2:

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

and

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

解决方案

I'm not sure, but test this stuff:

JavaScript via jQuery

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>

这篇关于使jQuery插件在Ajax调用后起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！