Cannot extend an existing jQuery Function from within a child

Challenge

I am using a Theme which comes with a custom jQuery Infinite-Scrolling feature. I need to extend that jQuery-function to hook-in a refresh of my AddThis-Share Buttons, so that they get added to dynamically loaded posts while infinite scrolling.

Situation

The Theme I'm using includes by default a /js/theme.js file, containing a JavaScript-function runInfiniteScroll() which is triggered, when a user scrolls down on the blog's homepage. Here's the relevant excerpt from that theme.js -file:

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

  });
});

In order to ensure future update-compatibility, I do not want to modify this existing theme.js-file, but activated a Child-Theme where I have a new child-theme.js -file (besides oder enhancements to the original theme).

Solution approach

I thought about extending the required JS-functions by extending it in my “child-theme.js” file.

So I included the file “child-theme.js” via wp_enqueue_script() additionally on page load:

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

This works:

<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>

Issue

Where I do not succeed is with extending the original JavaScript function:

ReferenceError: Can't find variable: runInfiniteScroll

In child-theme.js I have the following code:

/**
 * 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);

This Code Snippet - for overwriting a previously initiated jQuery function - is based on this stackoverflow.com question: Extending an existing jQuery function

Help needed

Can anyone point me in the right direction here, how I can extend the original function with custom code from within a child-theme.js -file? Is this even possible?

Thanks for your help & suggestions! ♥

---

You need to add your function to an object like $.fn.somefunctionname instead of declaring the function within the closure. A function inside a closure isn't visible outside of the closure. This will make it accessible from the jquery object.

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

上一篇: 如何挂接摄像头捕获？

下一篇: 无法从子项中扩展现有的jQuery函数