0

我有一个看起来像这样的匿名 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-wrap）包装 ajax 加载的内容。

我怎么做？

4

2 回答 2

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。

于 2013-09-30T15:08:23.847 回答
0

如果我理解正确，问题是您使用 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();
});
于 2013-09-30T15:10:27.513 回答