Javascript 未捕获类型错误：无法读取属性'；在'；空的

我得到一个未捕获的类型错误：

我不确定是什么原因造成的，可能与JQuery有关

以下是确切的代码：

//when add to cart link is clicked...
$('.addtocart').on('click', function(){

  //get the value of the "data-value" attribute for that link
  var vehicleRegistration = $(this).data('value');
  //save it to localStorage
  localStorage.setItem('vehicleRegistration', vehicleRegistration);


  //read from localStorage
  if( localStorage.getItem('vehicleRegistration') ){
    //add the value to the form input
    $('#field34').val( localStorage.getItem('vehicleRegistration') );
  }

});

以下是发生此事件的页面：

这真的让我很困惑，如果有人能帮我解决这个问题，我将不胜感激

---

谢谢，尼克，在你的网站上，你已经添加了

prototype.js

和

jQuery

。这里的

$

调用

prototype.js

，而不是

jQuery

。因此，请将代码改为：

jQuery('.addtocart').on('click', function(){

  //get the value of the "data-value" attribute for that link
  var vehicleRegistration = jQuery(this).data('value');
  //save it to localStorage
  localStorage.setItem('vehicleRegistration', vehicleRegistration);


  //read from localStorage
  if( localStorage.getItem('vehicleRegistration') ){
    //add the value to the form input
    jQuery('#field34').val( localStorage.getItem('vehicleRegistration') );
  }

});

或者您也可以这样做：

(function ($) {
    $('.addtocart').on('click', function(){

      //get the value of the "data-value" attribute for that link
      var vehicleRegistration = $(this).data('value');
      //save it to localStorage
      localStorage.setItem('vehicleRegistration', vehicleRegistration);


      //read from localStorage
      if( localStorage.getItem('vehicleRegistration') ){
        //add the value to the form input
        $('#field34').val( localStorage.getItem('vehicleRegistration') );
      }

    });
})(jQuery);

---

问题出在

$

上。您的$与jQuery和prototypejs发生冲突

无论何时编写jQuery代码，请尝试使用带有jQuery作为参数的自调用函数

例如

(function($){//You can use any character instead $ here.
//Your code here to use $. 
})(jQuery);

jQuery('.addtocart').on('click', function(){
  //Your code here.
});

或者另一种方法是使用

jQuery

word而不是

$

例如

(function($){//You can use any character instead $ here.
//Your code here to use $. 
})(jQuery);

jQuery('.addtocart').on('click', function(){
  //Your code here.
});

在您的代码中，

$

由prototype使用，

$（'.addtocart'）

在执行此脚本时返回null，因为没有class.addtocart元素。这就是为什么它在访问空*（$（'.addtocart'））*的时抛出错误的原因

如果只想使用jquery添加eventhandler。然后使用jqueryword代替$

//when add to cart link is clicked...
jQuery('.addtocart').on('click', function(){

  //get the value of the "data-value" attribute for that link
  var vehicleRegistration = jQuery(this).data('value');
  //save it to localStorage
  localStorage.setItem('vehicleRegistration', vehicleRegistration);


  //read from localStorage
  if( localStorage.getItem('vehicleRegistration') ){
    //add the value to the form input
    jQuery('#field34').val( localStorage.getItem('vehicleRegistration') );
  }

});

---

请将您的html元素放在这个类中，因此确保您的jquery版本等于或大于

1.7

您还应该显示html声明，确保在运行代码之前加载jquery。我认为这可能是因为您的html结构中没有这样的

.addtocart

元素。您可能希望以

.btn cart

元素为目标。除此之外，

jQuery

和

prototype

之间存在冲突，如下两个答案所示。因此，您可能需要使用以下命令：

jQuery（'.btn cart'）.on（'click'，function（）{…}）。