Jquery Uncaught ReferenceError: $var is not defined

时间:2021-01-26 15:44:13

标签: jquery

我遇到了一个问题,我不断收到错误

<块引用>

未捕获的引用错误:$shipping_address 未定义

我的目标是使用 id 获取输入中的值,然后将它们发布到端点。有人可以看看我的代码,让我知道我哪里出错了。

$(function() {
  // storing these in the DOM
  var $address_1 = $('#address_1').val();
  var $shipping_address = $('#shipping-address').val();
  var $shipping_address2 = $('#shipping-address2').val();
  var $shipping_city = $('#shipping-city').val();
  var $shipping_state = $('#shipping-state').val();
  var $shipping_zip = $('#shipping-zip').val();
});

//this is the event im looking for so i can post the users data to be validated by USPS
$(function() {
  $("#ao_solo").click(function() {
    alert('the click worked'.$shipping_address);
    //console.log("the same as billing addy is checked");
    // creating an array here
    var user_shipping_address = {
      shipping_address: $shipping_address.val(),
      shipping_address2: $shipping_address2.val(),
      shipping_city: $shipping_city.val(),
      shipping_state: $shipping_state.val(),
      shipping_zip: $shipping_zip.val()
    };

    // now im calling Nates USPS API
    $.ajax({
      type: 'POST',
      url: '/async/addressverification',
      data: user_shipping_address,
      success: function(sanitized_address) {
        var address_template = "" +
          "<div class='form-check'>" +
          "<input class='form-check-input' type='radio' name='flexRadioDefault' id='flexRadioDefault1'>" +
          "<label class='form-check-label sugaddyspace' for='flexRadioDefault1'>Suggested Address:" +
          "<span id='address_1'>" +
          "{{shipping_address2}}" +
          "{{shipping_address}}" +
          "{{shipping_city}}" +
          "{{hipping_state}}" +
          "{{shipping_zip}}" +
          "</label>" +
          "</div>" +
          "<hr/>";

        // some templating studd using Mustache.js
        // function add_sanitized_address(sanitized_address){
        //    $sanitized_address.append(Mustache.render(address_template, sanitized_address));
        // }
      },
      error: function() {
        //error in case something goes wrong.
        alert('error saving order or something lol');
      }
    });
  });
});

更新:

根据下面的评论,这里是新代码,但我仍然看到同样的错误

我按照你说的做了,但我仍然遇到同样的错误

$(function() {
  var address_1 = $('#address_1').val();
  var shipping_address = $('#shipping-address').val();
  var shipping_address2 = $('#shipping-address2').val();
  var shipping_city = $('#shipping-city').val();
  var shipping_state = $('#shipping-state').val();
  var shipping_zip = $('#shipping-zip').val();

  $("#ao_solo").click(function() {
    alert('the click worked');
  //console.log("the same as billing addy is checked");
  // creating an array here
  var user_shipping_address ={
    shipping_address: $shipping_address.val(),
    shipping_address2: $shipping_address2.val(),
    shipping_city: $shipping_city.val(),
    shipping_state: $shipping_state.val(),
    shipping_zip: $shipping_zip.val()
  };

  // now im calling Nates USPS API
  $.ajax({
      type:'POST',
      url:'/async/addressverification',
      data: user_shipping_address,
      success: function(sanitized_address){
        alert('the click worked');
      },
      error: function(){
          //error in case something goes wrong.
          alert('error saving order or something lol');
        }

      });
  });
});

1 个答案:

答案 0 :(得分:2)

问题是因为 $shipping_address 和其他变量仅在您拥有的第一个 document.ready 处理程序的范围内定义。要解决此问题,请将它们合二为一。

另外请注意,$ 命名约定用于指示包含 jQuery 对象的变量。由于您处理的值是字符串,因此您应该删除 $ 前缀。

$(function() {
  var address_1 = $('#address_1').val();
  var shipping_address = $('#shipping-address').val();
  var shipping_address2 = $('#shipping-address2').val();
  var shipping_city = $('#shipping-city').val();
  var shipping_state = $('#shipping-state').val();
  var shipping_zip = $('#shipping-zip').val();

  $("#ao_solo").click(function() {
    var user_shipping_address = {
      shipping_address: shipping_address,
      shipping_address2: shipping_address2,
      shipping_city: shipping_city,
      shipping_state: shipping_state,
      shipping_zip: shipping_zip
    };

    $.ajax({
      type: 'POST',
      url: '/async/addressverification',
      data: user_shipping_address,
      success: function(sanitized_address) {
        alert('the click worked');
      },
      error: function() {
        alert('error saving order or something lol');
      }
    });
  });
});