Question

我有一个匿名的jQuery函数，如下所示：

( function( $ ) {

    "use strict";

    var CHEF = window.CHEF || {};

    CHEF.fancyTitler = function() {
        if( $( '.k-fancy-title' ).length ) {
            $( '.k-fancy-title' ).wrap( '<div class="k-fancy-title-wrap" />' );
        }

    }
    // + a bunch of other functions inside

    $( document ).ready( function() {
        CHEF.fancyTitler();
        // + a bunch of other function inits
    } );

} )(jQuery);

...然后我使用AJAX将一些内容加载到页面上。关于内容加载，一切都很好，但.k-fancy-title元素不会被包装。很明显，我需要重新加载/重新调用/无论我的匿名函数是什么，以便用DIV（.k-fancy-title-wra p）包装ajax加载的内容。

我该怎么做？

Answer 1

如果您不想从ajax调用更改成功处理程序，则可以绑定jQuery的全局ajax成功事件ajaxComplete。

$(document).ajaxComplete(function() {
    chef.fancyTitler();
});

但是，您必须更改fancyTitler方法，以便不重新包装已经包装过的元素。

像这样的东西

CHEF.fancyTitler = function() {
    $('.k-fancy-title').each(function(){
        var el = $(this);
        if(!el.parents('.k-fancy-title-wrap').length)
        {
            el.wrap('<div class="k-fancy-title-wrap" />');
        }
    });
}

我还鼓励你简单地改变附加这些元素的ajax调用的成功语句，否则你将在任何ajax调用上调用fancyTitler。

Answer 2

如果我理解正确，问题是您使用AJAX加载一些内容（不是javascript，而只是一些html内容），并且类k-fancy-title的元素不会被已经加入加载javascript？

首次加载页面时，以及文档准备好后，您将触发fancyTitler（）函数（CHEF.fancyTitler()）。但是当你加载一些其他内容时，你的脚本中没有任何东西再次为新的DOM元素调用它（当在文档上触发ready事件时它不存在）。所以after新的ajax内容被加载，你应该再次激活该函数。如下所示：

$.get('/path/to/the/content', function() {
    // inside success function
    CHEF.fancyTitler();
});

jQuery脚本在AJAX加载页面中不可用

2 个答案: