关于jquery ajax加载数据的问题

news/2024/7/11 0:20:01 标签: jQuery

今天在改博客几个样式的时候,以为很自然的加上js就可以实现了,
没想到那个是ajax加载的数据,而非页面首次加载的,
比如下面的 “提交评论” 按钮,右侧的 搜索按钮 等。
我很自然的写了

文本
$("#btn_comment_submit").removeClass("comment_btn").addClass("btn"); //提交按钮
$(".div_my_zzk").addClass("input-append"); //搜索框
$(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //搜索按钮

可是刷新页面后发现有点不对,看了 network 后发现是 ajax 过来的,
无奈,除了自己写模版之外,只能自己想办法修改代码了。

那么下面就是我想到的等待元素出现方法。
虽然是基于 jQuery 的,但是代码很简洁,可以修改成纯js版的。

文本
jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次 
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了,就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --
            
            _self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}

使用方法当然也很简单,只有3个参数。
func 是回调函数,就是当指定元素出现后就执行的函数。
times 是检测次数,默认是-1,一直检测直到出现为止。
interval 是检测间隔,默认 20 毫秒一次。

我们修改下之前的代码

文本
$("#btn_comment_submit").wait(function() { //等待#btn_comment_submit元素的加载
    this.removeClass("comment_btn").addClass("btn"); //提交按钮
    //这里的 this 就是 $("#btn_comment_submit")
});

$("#widget_my_zzk").wait(function() { //等待#widget_my_zzk元素的加载
    $(".div_my_zzk").addClass("input-append"); //搜索框
    $(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //搜索按钮
});

是不是很简单、、

当然,依然不破坏jQuery的链式结构,你依然可以 $("#id").wait(function(){}).hide();
但是后来想想,元素都没加载,继续链下去也没意义,不过算了,不改了,就这样吧。呵呵 :-)

最后说点,,我经验尚浅,如果那里写的不对,还请各位大侠指点。


http://www.niftyadmin.cn/n/1732347.html

相关文章

让IE6也支持position:fixed

众所周知IE6不支持position:fixed&#xff0c;这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天遇到了这个问题。当时就简单的无视了IE6&#xff0c;但是对于大项目或商业网站&#xff0c;如果有用到这个属性的时候&#xff0c;是不可能直接无视的。 如何让p…

使用Jquery实现Checkbox全选功能

使用jQuery 实现全选非常简单&#xff0c;下边我们就看看如何实现jQuery 全选。假设在页面中有如下标签&#xff1a; 全选<input id"all" type"checkbox" value"" /> 投资<input id"Checkbox1" type"checkbox" nam…

让某部分HTML随滚动始终显示在页面上

我们经常在淘宝网看到这样的特效&#xff0c;商品列表特别长&#xff0c;而商品列名称始终保持在最顶端。如果你把滚动条滚动至最上边了&#xff0c;那么它会自动判断是否到顶端了&#xff0c;然后一直置顶从而不怕遮挡。 这种特效是通过JavaScript和CSS实现的&#xff0c;在实…

JavaScript锁屏 遮罩【转】

直接关闭锁屏解屏<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"> <head> <meta http-equiv&…

jQuery JSON jPlayer实现QQ空间音乐查询

QQ音乐接口地址: http://qzone-music.qq.com/fcg-bin/fcg_music_fav_getinfo.fcg?dirinfo0&dirid1&uinQQ号&p0.519638272547262&g_tk1284234856 这里给出核心代码: 1.gtk参数的获取方式function getGTK() {var str "HR3etVm80";var hash 5381;for…

Aptana Studio 介绍

1.Aptana 介绍 Aptana是一个非常强大、开源的专注于Ajax开发的开发工具。 它的特性包括&#xff1a; *JavaScript,JavaScript函数,HTML,CSS语言的Code Assist功能。 *Outliner(大纲)&#xff1a;显示JavaScript,HTML和CSS的代码结构。 *支持JavaScript&#xff0c;HTML&…

js中prompt()的用法

alert() 弹出个提示框 &#xff08;确定&#xff09; confirm() 弹出个确认框 &#xff08;确定&#xff0c;取消&#xff09; prompt() 弹出个输入框 让你输入东西 使用消息框 使用警告、提示和确认 可以使用警告、确认和提示消息框来获得用户的输入。这些消息框是 window…

jQuery复制节点实例

<script type"text/javascript">$(function(){$("ul li").click(function(){$(this).clone().appendTo("ul"); // 复制当前点击的节点&#xff0c;并将它追加到<ul>元素}) });</script> <script type"text/javascri…