javascript - jQuery 绑定(bind) ajax load() 事件

标签 javascript jquery events load bind

我有一个页面,显示多个带有结果详细信息的 block 。在每个 block 内我都有一些 <a>带有厚盒 jQuery 插件的标签:class="thickbox"

以下是一种 ampersant 标签的示例:

<a class="thickbox" title="Please Sign In" href="userloginredir.php?height=220&width=350&deal=3">

当我向页面添加 jQuery 分页时,由于页面上显示的结果太多,出现了问题。 包含结果的 div 组件通过 ajax load() 事件更新。

下面是分页脚本:

$(document).ready(function(){
    //References
    var pages = $("#menu_deals li");
    var loading = $("#loading_deals");
    var content = $("#content_deals");

    //show loading bar
    function showLoading(){
        loading
            .css({visibility:"visible"})
            .css({opacity:"1"})
            .css({display:"block"})
        ;
    }
    //hide loading bar
    function hideLoading(){
        loading.fadeTo(1000, 0);
    };


    //Manage click events
    pages.live('click',function(){
        //show the loading bar
        showLoading();

        //Highlight current page number
        pages.css({'background-color' : ''});
        $(this).css({'background-color' : 'yellow'});

        //Load content
        var pageNum = this.id;
        var targetUrl = "ajax_search_results.php?page=" + pageNum + "&" + $("#dealsForm").serialize() + " #content_d";
        content.load(targetUrl, hideLoading);
    });

    //default - 1st page
    $("#1").css({'background-color' : 'yellow'});
    var targetUrl = "ajax_search_results.php?page=1&" + $("#dealsForm").serialize() + " #content_d";
    showLoading();
    content.load(targetUrl, hideLoading);
});

当我添加分页(上面的代码)时,厚盒事件不再被识别,而不是弹出一个带有登录表单的窗口,而是在新页面中打开结果(就像单击普通链接一样) 根据我的 jQuery 知识,这意味着组件未在 DOM 中定义,因为内容在文档就绪触发后更新。

我正在尝试将加载事件与如下内容绑定(bind):

content.bind('load', ???);

但是我不知道在绑定(bind)load事件时如何传递load参数、targetUrl和回调函数hideLoading。

请帮助我解决这个问题,我已经花费了超过允许的时间。

最佳答案

tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox

在ajax回调中调用它。

关于javascript - jQuery 绑定(bind) ajax load() 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1729336/

相关文章:

javascript - gulp-sourcemaps,未捕获的语法错误 : Unexpected token :

jquery - 为什么当窗口不大于 1000 像素时 (screenWidth > 1000) 返回 true?

javascript - Jquery - Fullcalendar (v1.6.4) - 一些事件不显示结束日期

python - 应用引擎上的触发事件

javascript - 从不希望我拥有它的组件获取鼠标移动事件

javascript - 使用标签切换 <section> 背景

javascript - 如何验证文本框以检查输入的值是否仅是 100 的倍数

javascript - 布局类似于 google chrome 的 tweetdeck 应用程序

jquery - Twitter Bootstraps 选项卡功能的自定义动画

Javascript:如何在没有任何 HTML 的情况下获取用户输入并将其存储到变量中?