无法从子 theme.js 中扩展现有的 jQuery 函数

Question

挑战

我正在使用带有自定义 jQuery 无限滚动功能的主题。我需要扩展 jQuery- 函数来刷新我的 AddThis-Share 按钮，以便在无限滚动时将它们添加到动态加载的帖子中。

情况

我使用的主题默认包括一个 /js/theme.js 文件，其中包含一个 JavaScript-函数 runInfiniteScroll()，当用户在博客主页上向下滚动时，该函数将被触发。这是 theme.js 文件的相关摘录：

jQuery.noConflict()(function($) {
  $(document).ready(function() {
    'use strict';

    // VARIOUS OTHER JQUERY FUNCTIONS

    /**
     * Infinite scrolling
     * ----------------------------------------------------
     */
    // infinite scroll
    function runInfiniteScroll() {

      // start Infinite scroll
      $infiniteContainer.infinitescroll({
          navSelector : '.pagination',
          nextSelector : '.pagination .nav-links a.page-numbers',
          itemSelector : '.bwp-masonry-item',
          loading: {
            msgText: themeData.iScrollLoadingMsg,
            finishedMsg: themeData.iScrollFinishedMsg,
            img: loadingIMG
          },
          errorCallback: function () {
            // "No more posts to load" message
            if (themeData.iScrollLoadMoreBtn) {
              finishLoadMore();
            }
          }
        },
        function(newElements) {
          var
            newElementsId_str,
            newElementsId,
            tempIdArr = [],
            isSticky = false,
            stickyIdArr = [];

          // DO ALL THE DYNAMIC CONTENT LOADING
          // AND MANIPULATION/LAYOUTING STUFF HERE...

        } // end callback
      ); // end infinitescroll

    }

    // VARIOUS OTHER JQUERY FUNCTIONS

  });
});

为了确保将来的更新兼容性，我不想修改这个现有的 theme.js-文件，而是激活了一个子主题，其中我有一个新的 child-theme.js-文件（除了oder 对原始主题的增强）。

解决方法

我考虑过在我的“child-theme.js”文件中扩展所需的 JS 函数。

所以我在页面加载时通过 wp_enqueue_script() 添加了文件“child-theme.js”：

// child-theme.js
wp_enqueue_script('my-child-theme', get_stylesheet_directory_uri().'/js/child-theme.js', array(), '1.0.0', true);

这有效：

<script type='text/javascript' src='http://wordpress.local/wp-content/themes/main/js/theme.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://wordpress.local/wp-content/themes/child-theme/js/child-theme.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://wordpress.local/wp-includes/js/wp-embed.min.js?ver=4.7'></script>

问题

我没有成功的地方是扩展了原来的 JavaScript 函数：

ReferenceError：找不到变量：runInfiniteScroll

在 child-theme.js 我有以下代码：

/**
 * Enhanced: Infinite scrolling
 * ----------------------------------------------------
 */
(function($){
        'use strict';
        console.log( 'child-theme.js loaded' ); // this works

        // maintain a reference to the original function
        var orig_runInfiniteScroll = runInfiniteScroll; // <= ReferenceError: Can't find variable: runInfiniteScroll

        // ...before overwriting the jQuery extension point
        runInfiniteScroll = function() {
            console.log( 'Executing enhanced runInfiniteScroll()-function' );
            // original behavior - use function.apply (or .call) to preserve context
            var returnObj = orig_runInfiniteScroll.apply(this, arguments);

            // AddThis buttons - add to dynamically loaded content
            addthis.toolbox('.addthis_toolbox');

            // preserve return value (probably the jQuery object...)
            return returnObj;
        };
})(jQuery);

此代码段 - 用于覆盖先前启动的 jQuery 函数 - 基于此 whosebug.com 问题：Extending an existing jQuery function

需要帮助

任何人都可以在这里指出正确的方向，我如何使用 child-theme.js 文件中的自定义代码扩展原始功能？这可能吗？

感谢您的帮助和建议！♥

Answer 1

您需要将您的函数添加到 $.fn.somefunctionname 这样的对象中，而不是在闭包中声明该函数。闭包内的函数在闭包外是不可见的。这将使它可以从 jquery 对象访问。

无法从子 theme.js 中扩展现有的 jQuery 函数

Cannot extend an existing jQuery Function from within a child-theme.js

javascript

jquery

function

extend

挑战

情况

解决方法

问题

需要帮助