无法在child-theme.js中扩展现有的jQuery函数

Question

挑战

我使用的是带有自定义jQuery Infinite-Scrolling功能的主题。我需要扩展该jQuery函数以挂钩我的AddThis-Share Buttons，以便在无限滚动时将它们添加到动态加载的帖子中。

情况

我正在使用的主题默认包含/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函数 - 基于此stackoverflow.com问题：Extending an existing jQuery function

需要帮助

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

感谢您的帮助＆amp;建议！♥

Answer 1

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