回调函数未定义，即使它在调用javascript之前已定义

我正在使用for循环获取div中的所有数据位置。到目前为止，我有以下javascript代码：

<script type="text/javascript">
function callback(){
    $.getScript("/frontend/vendor/jquery/jquery.min.js", function() {
      $('input').on('change', function(){
        var qty = $(this).attr('id');
        var price = $('#'+qty+'_price').attr('value');
        var subtotal = qty * price;
        $('#'+qty+'_total').html('&euro; '+subtotal);
      })
    });
  }

  function checkout(callback){
    let eventDate = JSON.parse(localStorage.getItem("events"));
    var unique = eventDate.filter(function(itm, i, eventDate) {
        return i == eventDate.indexOf(itm);
    });
    let items = [];
    for (var n = 0; n < unique.length; n++){
        var eventId = unique[n];
        $.ajax({
            "url":"/get_my_product/"+ eventId,
            "type":"GET",
            "dataType":"json",
            "contentType":"application/json",
            success:function(response){
              let party = 'Party name';
              let html = "<tr class='product-row'><td class='product-col'><h5 class='product-title'><a>"+party+"</a></h5></td><td class='product-col'><h5 class='product-title'><a>"+response.date+"</a></h5></td><td value='"+response.price+"' id='"+n+"_price'>&euro; "+response.price+"</td><td><div class='input-group'><input class='vertical-quantity form-control dataqty'  id='"+n+"' type='number'><span class='input-group-btn-vertical'></span></div></td><td id='"+n+"_total'>&euro; "+response.price+"</td></tr>";
              $('#data').append(html);
            }
        })

    }
    callback && callback();
  }
  checkout();    
</script>

函数回调（）{
$.getScript（“/frontend/vendor/jquery/jquery.min.js”，函数（）{
$（'input'）。在（'change'，function（）上{
变量数量=$（this.attr（'id'）；
var价格=$（“#”+数量+“#U价格”）.attr（'value'）；
var小计=数量*价格；
$（“#”+数量+”总数“）.html（“&euro；”+小计）；
})
});
}
函数签出（回调）{
让eventDate=JSON.parse（localStorage.getItem（“事件”）；
var unique=eventDate.filter（函数（itm、i、eventDate）{
返回i==eventDate.indexOf（itm）；
});
设项目=[]；
对于（var n=0；n

当我试图在循环完成后调用函数时，它不起作用。这里怎么了？

改变

function checkout(callback){

到

我认为参数

callback

到函数

checkout

“阴影”前面定义的

callback

函数。然后，当您调用函数

checkout

时，您没有向该函数传递任何内容，

callback

将是

未定义的

或者，在最后一行中，将函数作为参数传递：

checkout(callback);

---

添加另一版本的jQuery来添加事件是没有意义的。您没有将回调传递给该方法，因此它总是未定义的。在调用回调之前，您不会等待Ajax调用完成

// No reason for loading the JQuery version here
function addMyEvents() {
  $('input').on('change', function() {
    var qty = $(this).attr('id');
    var price = $('#' + qty + '_price').attr('value');
    var subtotal = qty * price;
    $('#' + qty + '_total').html('€ ' + subtotal);
  })
}

function checkout(callback) {
  // hold the ajax calls
  const myAjaxCalls = []
  let eventDate = JSON.parse(localStorage.getItem("events"));
  var unique = eventDate.filter(function(itm, i, eventDate) {
    return i == eventDate.indexOf(itm);
  });
  let items = [];
  for (var n = 0; n < unique.length; n++) {
    var eventId = unique[n];
    // push the ajax calls to an array
    myAjaxCalls.push($.ajax({
      "url": "/get_my_product/" + eventId,
      "type": "GET",
      "dataType": "json",
      "contentType": "application/json",
      success: function(response) {
        let party = 'Party name';
        let html = "<tr class='product-row'><td class='product-col'><h5 class='product-title'><a>" + party + "</a></h5></td><td class='product-col'><h5 class='product-title'><a>" + response.date + "</a></h5></td><td value='" + response.price + "' id='" + n + "_price'>&euro; " + response.price + "</td><td><div class='input-group'><input class='vertical-quantity form-control dataqty'  id='" + n + "' type='number'><span class='input-group-btn-vertical'></span></div></td><td id='" + n + "_total'>&euro; " + response.price + "</td></tr>";
        $('#data').append(html);
      }
    }))

  }
  // if we have a callback
  if (callback) {
    // wait for all the ajax calls to be done
    $.when.apply($, myAjaxCalls).done(callback)
  }
}
// pass the function to the method.
checkout(addMyEvents);

//没有理由在此处加载JQuery版本
函数addMyEvents（）{
$（'input'）。在（'change'，function（）上{
变量数量=$（this.attr（'id'）；
var价格=$（“#”+数量+“#价格”）.attr（'value'）；
var小计=数量*价格；
$（“#”+数量+“#总计”）.html（“&euro；”+小计）；
})
}
函数签出（回调）{
//暂停ajax调用
const myAjaxCalls=[]
让eventDate=JSON.parse（localStorage.getItem（“事件”）；
var unique=eventDate.filter（函数（itm、i、eventDate）{
返回i==eventDate.indexOf（itm）；
});
设项目=[]；
对于（var n=0；n

现在最好的部分是，您甚至不需要担心绑定事件的回调。您可以只使用事件委派，它会起作用。这样，无论何时向页面添加输入，都将拾取该输入

$(document).on('change', 'input', function() {
    var qty = $(this).attr('id');
    var price = $('#' + qty + '_price').attr('value');
    var subtotal = qty * price;
    $('#' + qty + '_total').html('€ ' + subtotal);
})

function checkout() {
  let eventDate = JSON.parse(localStorage.getItem("events"));
  var unique = eventDate.filter(function(itm, i, eventDate) {
    return i == eventDate.indexOf(itm);
  });
  let items = [];
  for (var n = 0; n < unique.length; n++) {
    var eventId = unique[n];
    $.ajax({
      "url": "/get_my_product/" + eventId,
      "type": "GET",
      "dataType": "json",
      "contentType": "application/json",
      success: function(response) {
        let party = 'Party name';
        let html = "<tr class='product-row'><td class='product-col'><h5 class='product-title'><a>" + party + "</a></h5></td><td class='product-col'><h5 class='product-title'><a>" + response.date + "</a></h5></td><td value='" + response.price + "' id='" + n + "_price'>&euro; " + response.price + "</td><td><div class='input-group'><input class='vertical-quantity form-control dataqty'  id='" + n + "' type='number'><span class='input-group-btn-vertical'></span></div></td><td id='" + n + "_total'>&euro; " + response.price + "</td></tr>";
        $('#data').append(html);
      }
    })
  }
}

checkout();

$（文档）.on（'change'，'input'，function（））{
变量数量=$（this.attr（'id'）；
var价格=$（“#”+数量+“#价格”）.attr（'value'）；
var小计=数量*价格；
$（“#”+数量+“#总计”）.html（“&euro；”+小计）；
})
函数签出（）{
让eventDate=JSON.parse（localStorage.getItem（“事件”）；
var unique=eventDate.filter（函数（itm、i、eventDate）{
返回i==eventDate.indexOf（itm）；
});
设项目=[]；
对于（var n=0；n

您没有为回调传递参数：

checkout（）

您是想传递

回调

函数吗？：

checkout（callback）

（注意：在本例中，

回调

，重复使用彼此非常接近的变量名，通常会导致混淆。这似乎就是这里发生的情况。）异步调用101。。。。for循环将在ajax调用返回之前完成。您从不同的地方订购了一堆包，并试图在它们到达之前将它们全部打开。这与您的问题无关，但用jQuery加载另一个jQuery实例肯定是错误的，或者至少表明存在逻辑问题。@t.niese我不知道这会产生问题。我试图重新加载js，因为我想用ajax获取最近放置的div的id。@AlishaLamichhane你说它不工作是什么意思？当您进行更改时，

callback

是否未被调用，或者

callback

函数中的代码是否未按预期工作？仍然只是部分问题

$(document).on('change', 'input', function() {
    var qty = $(this).attr('id');
    var price = $('#' + qty + '_price').attr('value');
    var subtotal = qty * price;
    $('#' + qty + '_total').html('€ ' + subtotal);
})

function checkout() {
  let eventDate = JSON.parse(localStorage.getItem("events"));
  var unique = eventDate.filter(function(itm, i, eventDate) {
    return i == eventDate.indexOf(itm);
  });
  let items = [];
  for (var n = 0; n < unique.length; n++) {
    var eventId = unique[n];
    $.ajax({
      "url": "/get_my_product/" + eventId,
      "type": "GET",
      "dataType": "json",
      "contentType": "application/json",
      success: function(response) {
        let party = 'Party name';
        let html = "<tr class='product-row'><td class='product-col'><h5 class='product-title'><a>" + party + "</a></h5></td><td class='product-col'><h5 class='product-title'><a>" + response.date + "</a></h5></td><td value='" + response.price + "' id='" + n + "_price'>&euro; " + response.price + "</td><td><div class='input-group'><input class='vertical-quantity form-control dataqty'  id='" + n + "' type='number'><span class='input-group-btn-vertical'></span></div></td><td id='" + n + "_total'>&euro; " + response.price + "</td></tr>";
        $('#data').append(html);
      }
    })
  }
}

checkout();