title: Override a jQuery function
body: <p>I have a "core" javascript with some jQuery functions I can't touch, and a "custom" javascript with scripts I write</p>
  
  <p>I'd like to override some "core" functions with my "custom" ones. i.e. like this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Core script (app.js), I can't touch this
  var App = function(){
      // function to override or to inherit
      var handleBootstrapConfirmation = function(){
          $('[data-toggle=confirmation]').confirmation({
              btnOkClass: 'btn btn-sm btn-success',
              btnCancelClass: 'btn btn-sm btn-danger'
          })
      };
      return {
          init: function(){
              handleBootstrapConfirmation();
          }
      }
  }();
  $(document).ready(function() {
      App.init();
  });
  
  // Custom script (custom.js), I can touch this
  var Custom = function(){
      // this should override the previous one
      var handleBootstrapConfirmation = function(){
          $('[data-toggle=confirmation]').confirmation({
              title: 'Custom title'
              // other options here
          })
      };
      return {
          init: function(){
              handleBootstrapConfirmation();
          }
      }
  }();
  $(document).ready(function() {
      Custom.init();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/mistic100-Bootstrap-Confirmation/2.4.0/bootstrap-confirmation.min.js"&gt;&lt;/script&gt;
  &lt;p style="padding:120px 80px"&gt;&lt;a href="#" class="btn btn-primary" data-toggle="confirmation"&gt;Delete?&lt;/a&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You see, the App <code>handleBootstrapConfirmation()</code> is executed but the Custom <code>handleBootstrapConfirmation()</code> is not: I have to comment the <code>App.init();</code> line to make it work</p>
  
  <p>I know I can change things in Custom script (as <code>$('[data-toggle=confirm]')</code> instead of <code>$('[data-toggle=confirmation]')</code>) but I'd like to keep things consistent</p>
  
  <p>Is there an easy way to do this? Thanks</p>