ReferenceError: Firefox'ta olay tanımlı değil hatası

Bir müşteri için bir sayfa yaptım ve başlangıçta Chrome'da çalışıyordum ve Firefox'ta çalışıp çalışmadığını kontrol etmeyi unuttum. Şimdi, büyük bir sorunum var çünkü sayfanın tamamı Firefox'ta çalışmayan bir betiğe dayanıyor.

relDoğru sayfayı gizlemeye ve göstermeye götüren tüm "bağlantılara" dayanır . Bunun Firefox'ta neden çalışmadığını anlamıyorum.

Örnek sayfalar kimliğe sahip için #menuPage, #aboutPageve bu kadar. Tüm bağlantılar şu koda sahiptir:

<a class="menuOption" rel='#homePage' href="#">Velkommen</a> 

Chrome ve Safari'de mükemmel çalışıyor.

İşte kod:

$(document).ready(function(){

//Main Navigation


$('.menuOption').click(function(){

  event.preventDefault();
  var categories = $(this).attr('rel');
  $('.pages').hide();
  $(categories).fadeIn();


});

// HIDES and showes the right starting menu
    $('.all').hide();
    $('.pizza').show();


// Hides and shows using rel tags in the buttons    
    $('.menyCat').click(function(event){
        event.preventDefault();
        var categori = $(this).attr('rel');
        $('.all').hide();
        $(categori).fadeIn();
        $('html,body').scrollTo(0, categori);

    });


}); 

Olay işleyicilerinizi (bazılarını) yanlış beyan ediyorsunuz:

$('.menuOption').click(function( event ){ // <---- "event" parameter here

    event.preventDefault();
    var categories = $(this).attr('rel');
    $('.pages').hide();
    $(categories).fadeIn();


});

İşleyicilere bir parametre olmak için "olay" a ihtiyacınız vardır. WebKit, IE'nin "olay" için genel bir sembol kullanma şeklindeki eski davranışını izler, ancak Firefox bunu yapmaz. JQuery kullandığınızda, bu kitaplık davranışı normalleştirir ve olay işleyicilerinizin olay parametresini geçirmesini sağlar.

düzenle - açıklığa kavuşturmak için: bir parametre adı sağlamalısınız ; kullanmak event, neyi amaçladığınızı netleştirir, ancak ona eveya cupcakebaşka bir şey diyebilirsiniz .

Ayrıca, "yerel" (Chrome ve IE ve Safari'de) yerine jQuery'den iletilen parametreyi kullanmanız gerekmesinin nedeni, bu parametrenin (parametre) yerel olay nesnesi etrafında bir jQuery sarmalayıcısı olmasıdır. Sarmalayıcı, tarayıcılarda olay davranışını normalleştiren şeydir. Global sürümü kullanırsanız, bunu anlamazsınız.

Bunun nedeni event, clickişleve girmeyi unutmuş olmanızdır :

$('.menuOption').on('click', function (e) { // <-- the "e" for event

    e.preventDefault(); // now it'll work

    var categories = $(this).attr('rel');
    $('.pages').hide();
    $(categories).fadeIn();
});

Bir yan not, çoğu tarayıcıda global bir değişken olduğundan , esözcüğün aksine daha yaygın olarak kullanılır .eventEvent