无法读取null的属性"on" [英] Cannot read property 'on' of null

问题描述

当您单击按钮时，我正在尝试使jQuery发挥涟漪效果.

I'm trying to get a bit of jQuery working for a ripple effect when you click the button.

现在，它会在文档头部拉出jquery，然后在按钮之后出现

Right now it pulls jquery in the document head, and then after the button there is

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

然后

(function(){

$(".solar-button").on("click", function(e){

    var x = e.pageX;
    var y = e.pageY;
    var clickY = y - $(this).offset().top;
    var clickX = x - $(this).offset().left;
var box = this;

var setX = parseInt(clickX);
var setY = parseInt(clickY);
$(this).find("svg").remove();
$(this).append('<svg><circle cx="'+setX+'" cy="'+setY+'" r="'+0+'"></circle></svg>');

setTimeout(function(){
  var c = $(box).find("circle");
  c.animate(
    {
      "r" : $(box).outerWidth()
    },
    {
      easing: "easeOutQuad",
      duration: 500,
        step : function(val){
                    c.attr("r", val);
                }
    }
  );

});

});

}());

由于某种原因，我得到了错误

For some reason I'm getting the error

无法读取null的属性'on'.

"cannot read property 'on' of null".

如果我将jQuery放到对jQuery缓动的调用之上，那么它就起作用了……但是由于我的头也调用了jQuery，所以我的站点菜单不起作用.不知道为什么为什么不能在文档的开头使用相同的jQuery.

If I put jQuery right above the call for jquery easing then it works... however then my sites menu doesn't work since jQuery is also called in the head. Not sure why it's not able to use the same jQuery in the head of my document.

我当前正在尝试使用的链接是此处作为底部的按钮.没有运气.我会摆弄一下，但是将可能与jQuery冲突的所有内容放到Magento网站中都是疯狂的.

The link I'm currently trying this on is here for the button at the bottom. Having no luck. I'd try this in a fiddle but putting everything that could be conflicting with jQuery in a Magento site is insane.

推荐答案

最有可能发生的事情是，由于功能的位置，您正试图访问jQuery不知道存在的元素.

What is most likely happening is you are trying to access an element that jQuery doesn't know exists because of the positioning of your function.

相反，请尝试:

$(document).on("click", ".solar-button", function(e){
   //my function
});

这篇关于无法读取null的属性"on"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！