jQuery BBQ - 在注入的 Javascript 中执行事件,就像使用 document.ready 一样

发布于 2024-10-21 20:50:32 字数 3163 浏览 2 评论 0原文

我已经成功实现 jQuery BBQ 在 HTML 页面上,它允许我在单击某个类的触发链接时将 HTML 注入到 div 中。我想做的是执行一些包含在注入页面中的 jquery,就好像 document.ready 已被注入触发一样。

我使用的是 jQuery 1.4.4,所以更愿意避免使用 LiveQuery。

到目前为止,这是我的尝试:-

// Global Join Functions

$(window).bind( 'hashchange', function() {
    // ==================================================================
    // Progressively enhance Radio Buttons and Checkboxes
    // ==================================================================
    $(".enhancedradiocheck").buttonset();
    // ==================================================================
    // Ajaxify links and load them in a div whilst hashing state
    // ==================================================================
    // Keep a mapping of url-to-container for caching purposes.
    var cache = {
        // If url is '' (no fragment), display this div's content.
        '': $('.form-default')
    };
    // Bind an event to window.onhashchange that, when the history state changes,
    // gets the url from the hash and displays either our cached content or fetches
    // new content to be displayed.
    $(window).bind('hashchange', function (e) {
        // Get the hash (fragment) as a string, with any leading # removed. Note that
        // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
        var url = $.param.fragment();
        // Remove .form-current class from any previously "current" link(s).
        $('a.form-current').removeClass('form-current');
        // Hide any visible ajax content.
        $('.ajaxified').children(':visible').hide();
        if (cache[url]) {
            // Since the element is already in the cache, it doesn't need to be
            // created, so instead of creating it again, let's just show it!
            cache[url].show();
        } else {
            // Show "loading" content while AJAX content loads.
            $('.form-loading').show();
            // Create container for this url's content and store a reference to it in
            // the cache.
            cache[url] = $('<div class="form-item"/>')
            // Append the content container to the parent container.
            .appendTo('.ajaxified')
            // Load external content via AJAX. Note that in order to keep this
            // example streamlined, only the content in .infobox is shown. You'll
            // want to change this based on your needs.
            .load(url, function () {
                // Content loaded, hide "loading" content.
                $('.form-loading').hide();
            });
        }
    })
    // Since the event is only triggered when the hash changes, we need to trigger
    // the event now, to handle the hash the page may have loaded with.
    $(window).trigger('hashchange');
    //Add the hash to any link with the class ajaxlink so it degrades gracefully
    $("a.ajaxlink").each(function () {
        el = $(this);
        ajaxhref = "#" + el.attr("href");
        el.attr("href", ajaxhref);
    })
});

I've successfully implemented jQuery BBQ on an HTML page which allows me to inject HTML into a div when trigger links with a certain class are clicked. What I'd like to do is execute some jquery which is included within the injected page as if document.ready had been triggered by the injection.

I'm using jQuery 1.4.4 so would prefer to avoid LiveQuery.

Here is my attempt so far:-

// Global Join Functions

$(window).bind( 'hashchange', function() {
    // ==================================================================
    // Progressively enhance Radio Buttons and Checkboxes
    // ==================================================================
    $(".enhancedradiocheck").buttonset();
    // ==================================================================
    // Ajaxify links and load them in a div whilst hashing state
    // ==================================================================
    // Keep a mapping of url-to-container for caching purposes.
    var cache = {
        // If url is '' (no fragment), display this div's content.
        '': $('.form-default')
    };
    // Bind an event to window.onhashchange that, when the history state changes,
    // gets the url from the hash and displays either our cached content or fetches
    // new content to be displayed.
    $(window).bind('hashchange', function (e) {
        // Get the hash (fragment) as a string, with any leading # removed. Note that
        // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
        var url = $.param.fragment();
        // Remove .form-current class from any previously "current" link(s).
        $('a.form-current').removeClass('form-current');
        // Hide any visible ajax content.
        $('.ajaxified').children(':visible').hide();
        if (cache[url]) {
            // Since the element is already in the cache, it doesn't need to be
            // created, so instead of creating it again, let's just show it!
            cache[url].show();
        } else {
            // Show "loading" content while AJAX content loads.
            $('.form-loading').show();
            // Create container for this url's content and store a reference to it in
            // the cache.
            cache[url] = $('<div class="form-item"/>')
            // Append the content container to the parent container.
            .appendTo('.ajaxified')
            // Load external content via AJAX. Note that in order to keep this
            // example streamlined, only the content in .infobox is shown. You'll
            // want to change this based on your needs.
            .load(url, function () {
                // Content loaded, hide "loading" content.
                $('.form-loading').hide();
            });
        }
    })
    // Since the event is only triggered when the hash changes, we need to trigger
    // the event now, to handle the hash the page may have loaded with.
    $(window).trigger('hashchange');
    //Add the hash to any link with the class ajaxlink so it degrades gracefully
    $("a.ajaxlink").each(function () {
        el = $(this);
        ajaxhref = "#" + el.attr("href");
        el.attr("href", ajaxhref);
    })
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

命硬 2024-10-28 20:50:32

我设法找到了一个解决方案 - 本质上,您可以在原始脚本中的 AJAX 调用下方插入任何您想要由 AJAX 注入触发的内容,如下所示:-

.load(url, function () {
                // Content loaded, hide "loading" content.
                $('.form-loading').hide();
                 $(".enhancedradiocheck").buttonset();


            });

I managed to find a solution - Essentially you can insert anything you want to be triggered by the AJAX injection underneath the AJAX call in the original script as follows:-

.load(url, function () {
                // Content loaded, hide "loading" content.
                $('.form-loading').hide();
                 $(".enhancedradiocheck").buttonset();


            });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文