Question

您好我有一个模板，其中脚本在此文件中初始化，如此

;(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';

问题是我试图命名该函数并在我的ajax代码中调用它，没有运气

这是我的ajax代码，我怎么能再次初始化所以标签和引导进度条再次工作。在加载的代码中？

$(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: '<?php echo $this->make_url("user/prevjobs/"); ?>',
      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);
      }
    });
  });

});

我尝试将进度条代码包装起来进行测试，并命名一个函数。

像这样

<script>
    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');
                });
            }
        });
    }

});

}




    </script>

但是在Ajax调用进度条不能正常工作之后。

Answer 1

您的问题是您的功能和对它的调用属于不同的范围。

在像$(document).ready(function(){ ....这样的on load函数中定义函数或变量时，或者像;(function ($) {...那样定义函数或变量时，只能从该闭包范围内访问这些函数或变量。

以下是一个例子：

＆＃13;

$(document).ready(function(){
    function myFunction(msg){
        console.log(msg);
    }
   
    myFunction('this will work')
    
    
});

$(document).ready(function(){
    
    myFunction('but this never will');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

您需要将函数移动到全局范围或将调用移动到与函数本身相同的范围

另一个解决方案是通过document对象访问该函数，如下所示：

＆＃13;

;(function ($) {

    $.fn.myFunction = function (msg) {
        console.log(msg);
    }
    

})(jQuery);

$(document).ready(function(){
    
     $(document).myFunction('called from outside the original scope');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

ajax调用

1 个答案: