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屋!