无法从子项中扩展现有的jQuery函数

挑战

我正在使用自定义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， 。

解决方案

我想通过在我的“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问题：扩展现有的jQuery函数

需要帮助

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

感谢您的帮助和建议！ ♥

---

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

链接地址: http://www.djcxy.com/p/14221.html

上一篇: Cannot extend an existing jQuery Function from within a child

下一篇: How to improve jqPlot parseOptions/jquery.extend performance