Onclick funktioniert nicht. Die Eigenschaft 'click' von null kann nicht gelesen werden

Question

Ich erhalte weiterhin den folgenden Fehler von der Browserkonsole, wenn ich mein Skript in meine Magento store lade. Es ist nur ein Onclick-Ereignis auf einem Div, aber ich erhalte diesen Fehler:

"Uncaught TypeError: Kann Eigenschaft 'Klick' von Null nicht lesen."

Das Skript funktioniert in JSfiddle, so dass ich wirklich nicht ganz sicher bin, warum es nicht funktioniert. Ich habe versucht, es innerhalb eines $ (Dokument) .ready() auch einzuschließen, aber ich empfange den gleichen Fehler.

Code:

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

Jede Hilfe Debuggen dieses Problem wird sehr geschätzt.

Answer 1

TL; DR:

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

---

Was das Problem ist?

Prototype.js wurde nach jQuery geladen und wurde global $ Symbol überschrieben.

Wie können wir damit umgehen?

Sie haben noch jQuery global zu verwenden. Verwenden Sie es einfach überall, wo Sie $ verwenden möchten.

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

Sie können auch einige Kurzschrift definieren für sie vereinfachen:

jQ = jQuery; 

---

gemeinsame bewährte Methode für Fälle wie diesen IIFE wrap für Ihren Code zu verwenden ist:

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

Dies fügt dem globalen Umfang nichts hinzu und erreicht, was wir brauchen.
Sie können immer einige andere Bibliotheken (prototypejs?) Mit Alias ​​injizieren, was Sie zu diesem IIFE wollen.

hinweis-1: Semikolon vor IIFE schützt JavaScript vor einem Ausdruck mit einem verpassten Semikolon, das als Funktionsaufruf interpretiert werden soll.

---

jQuery selbst stellt eine Abkürzung für diesen Fall:

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

Answer 2

Diese Stelle ist jQuery nicht verwendet wird, ist es mit prototypejs