Функция обратного вызова не определена, даже если она была определена непосредственно перед вызовом в javascript

Question

Я использую для l oop получить все данные место в 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>

Когда я пытаюсь вызвать функцию после завершения l oop, она не работает. Что здесь не так?

Answer 1

Изменить

function checkout(callback){

на

function checkout() {

Я думаю, что аргумент callback для функции checkout "затеняет" ранее определенную функцию callback. Затем, когда вы вызываете функцию checkout, вы ничего не передаете функции, и callback будет undefined.

Или, в последней строке, передайте функцию в качестве аргумента:

checkout(callback);

Answer 2

Нет смысла добавлять другую версию 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);

Теперь самое приятное то, что вам даже не нужно беспокоиться о обратном вызове для привязки событий. Вы можете просто использовать делегирование событий, и это будет работать. Таким образом, каждый раз, когда ввод добавляется на страницу, он будет выбран.

$(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();