Question

当你点击按钮时，我正试图让jQuery有点涟漪效应。

现在它在文档头中拉出jquery，然后在按钮之后有

然后

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

});

});

}());

由于某种原因，我收到错误“无法读取属性”的'null'。如果我把jQuery放在jquery缓动的调用之上，那么它的工作原理......然而我的网站菜单不起作用，因为jQuery也在头部调用。不知道为什么它不能在我的文档头部使用相同的jQuery。

我正在尝试此操作的链接是here底部的按钮。没有运气。我会在一个小提琴中尝试这个，但是在Magento网站上放置一些可能与jQuery冲突的东西是疯了。

Answer 1

最有可能发生的事情是，由于函数的定位，您正在尝试访问jQuery不知道存在的元素。

相反，请尝试：

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

Answer 2

Javascript一旦发生就会执行。你提到这在块中不起作用，这是有道理的，因为尚未加载任何物体。有两种选择：

在页面底部加入您的javascript。我已经看到了这一点，但不知道这是否是最佳做法。
可能您最好的解决方案是使用jQuery(callback)。这专门执行在DOM完全加载后传递的任何函数。

希望这有帮助，祝你好运！

无法读取null的属性'on'

2 个答案: