title: Initialize Anonymous function after ajax call
body: <p>Hi I have a template where the scripts are initialized in this file like this</p>
  
  <pre><code>;(function ($) {
  
  "use strict";
  
  var $body = $('body');
  var $head = $('head');
  var $header = $('#header');
  var transitionSpeed = 300;
  var pageLoaded = setTimeout(addClassWhenLoaded, 1000);
  var marker = 'img/marker.png';
  </code></pre>
  
  <p>The problem is i have tried to name the function and call it in my ajax code, with no luck</p>
  
  <p>here is my ajax code, how can i initialize again so tabs and bootstrap progress bar work again. in the loaded code?</p>
  
  <pre><code>$(document).ready(function(){
    var form = $('#prevjob_form');
    var submit = $('#prevjob_submit');
  
    form.on('submit', function(e) {
      // prevent default action
      e.preventDefault();
      // send ajax request
      $.ajax({
        url: '&lt;?php echo $this-&gt;make_url("user/prevjobs/"); ?&gt;',
        type: 'POST',
        cache: false,
        data: form.serialize(), //form serizlize data
        beforeSend: function(){
          // change submit button value text and disabled it
          submit.val('Añadiendo...').attr('disabled', 'disabled');
        },
        success: function(data){
          // Append with fadeIn see http://stackoverflow.com/a/978731
          var item = $(data);
          $('.prevjobs').empty().append(item);
          //ready();
  
         // progress();
         //I try to name it progress and call it here, but this wont work
  
  var objDiv = document.getElementById("prevjobs");
  objDiv.scrollTop = objDiv.scrollHeight;
          // reset form and button
  
  
  
          form.trigger('reset');
          submit.val('Añadir Gol').removeAttr('disabled');
  
        },
        error: function(e){
          console.log(e);
        }
      });
    });
  
  });
  </code></pre>
  
  <p>I try to wrap the progress bar code just to test, and name a function.</p>
  
  <p>like this</p>
  
  <pre><code>&lt;script&gt;
      function progress(){
      $('.progress-bar').each(function () {
  
      var $this = $(this),
          progress = $this.data('progress');
  
      if (!$this.hasClass('no-animation')) {
          $this.one('inview', function () {
              $this.children('.progress-bar-inner').children('span').css('width', progress + '%');
          });
      } else {
          $this.children('.progress-bar-inner').children('span').css('width', progress + '%');
      }
  
      if ($this.hasClass('toggle')) {
          $this.children('.progress-bar-toggle').on('click', function (event) {
              event.preventDefault();
  
              if (!$this.hasClass('active')) {
                  $this.children('.progress-bar-content').slideDown(250, function () {
                      $this.addClass('active');
                  });
              } else {
                  $this.children('.progress-bar-content').slideUp(250, function () {
                      $this.removeClass('active');
                  });
              }
          });
      }
  
  });
  
  }
  
  
  
  
      &lt;/script&gt;
  </code></pre>
  
  <p>But again after the Ajax call progress bar are not working. </p>