Onclick无法正常工作.无法读取null的属性"click" [英] Onclick not working. Cannot read property 'click' of null

问题描述

将脚本加载到我的 Magento商店时，我始终从浏览器控制台收到以下错误.它正在监听的只是div上的onclick事件，但我收到此错误:

I keep receiving the following error from the browser console when loading my script into my Magento store. All that it is listening for is an onclick event on a div yet I receive this error:

未捕获的TypeError:无法读取null的属性'click'."

"Uncaught TypeError: Cannot read property 'click' of null."

该脚本可以在 JSfiddle 中使用，所以我不太确定为什么它不起作用.我也尝试将其包含在$(document).ready()中，但收到相同的错误.

The script works in JSfiddle so I'm really not quite sure why it isn't working. I've tried enclosing it within a $( document ).ready() as well but I receive the same error.

代码:

var step = 0;
var deviceType = "";
var modelType = "";

function showGen(){
    $('.phoneTypes').css("display", "none");

    if (deviceType == "Samsung"){
      $('.sphoneGens').css("display", "block");
    }
    if (deviceType == "iPhone"){
      $('.iphoneGens').css("display", "block");
    }
    if (deviceType == "iPad"){
      $('.ipadGens').css("display", "block");
    }
}

// Pick Device Type
$('.choicelabel').click(function(){
    deviceType = $(this).children('input').val();
    showGen();
});

//Pick Device Gen
$('.choiceType').click(function(){
    modelType = $(this).children('input').val();
    //$(".iphoneGens").css("display", "none");
    console.log(deviceType);
    console.log(modelType);
    $(this).parents(".row").hide();
});

任何帮助调试此问题的人员将不胜感激.

Any help debugging this issue will be greatly appreciated.

推荐答案

TL; DR:

jQuery( document ).ready(function( $ ) {
  // Code using $ as usual goes here.
  // And document is ready too
});

---

出了什么问题?

Prototype.js在jQuery之后加载，并覆盖了全局$符号.

Prototype.js was loaded after jQuery and was overwrite global $ symbol.

我们该如何处理?

您仍然可以使用jQuery全局变量.只需在要使用$的任何地方使用它.

You still have jQuery global to use. Just use it everywhere, where you want to use $.

// Pick Device Type
jQuery('.choicelabel').click(function(){
    deviceType = jQuery(this).children('input').val();
    showGen();
});

//Pick Device Gen
jQuery('.choiceType').click(function(){
    modelType = jQuery(this).children('input').val();
    //jQuery(".iphoneGens").css("display", "none");
    console.log(deviceType);
    console.log(modelType);
    jQuery(this).parents(".row").hide();
});

您还可以定义一些简化形式:

You can also to define some shorthand for simplify it:

jQ = jQuery;

---

对于这种情况，常见的最佳做法是对代码使用 IIFE 包装:

---

Common best practice for cases like this is to use IIFE wrap for your code:

;(function($){ // see note-1
  // Use $ here! It's jQuery now
  $(function(){
    // be sure DOM was loaded before work with it(ex: binding events)
  });
})(jQuery);

这不会为全球范围增加任何东西，并且可以满足我们的需求.
您总是可以使用别名向IIFE注入其他一些库(prototypejs?).

This adds nothing to global scope and achieves what we need.
You always can inject some other libraries(prototypejs?) with alias what you want to this IIFE.

note-1:在IIFE之前的分号可以保护javascript与以前的表达式(带有丢失的分号)一起解释为函数调用.

jQuery本身为这种情况提供了简写:

jQuery itself provides shorthand for this case:

jQuery( document ).ready(function( $ ) {
  // Code using $ as usual goes here.
  // And document is ready too
});

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