संदर्भ: घटना फ़ायरफ़ॉक्स में परिभाषित त्रुटि नहीं है

Question

मैंने एक क्लाइंट के लिए एक पेज बनाया है और मैं शुरू में क्रोम में काम कर रहा था और यह जाँचना भूल गया था कि यह फ़ायरफ़ॉक्स में काम कर रहा है या नहीं। अब, मुझे एक बड़ी समस्या है क्योंकि पूरा पृष्ठ एक स्क्रिप्ट पर आधारित है जो फ़ायरफ़ॉक्स में काम नहीं करता है।

यह सभी "लिंक" पर आधारित है, relजिसमें सही पृष्ठ को छिपाने और दिखाने की ओर है। मुझे समझ में नहीं आता कि यह फ़ायरफ़ॉक्स में काम क्यों नहीं कर रहा है।

उदाहरण के लिए पृष्ठों में आईडी #menuPage, #aboutPageइत्यादि हैं। सभी लिंक में यह कोड है:

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

यह क्रोम और सफारी में पूरी तरह से काम कर रहा है।

यहाँ कोड है:

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

    });


}); 

Comments

यह वास्तव में उपयोगी होगा यदि आप वास्तव में समझाते हैं कि आप क्या मतलब है जब आप कहते हैं कि यह "काम नहीं करता है"। क्या होता है? त्रुटियाँ? ख़राब लेआउट? खराब व्यवहार?

— पॉंच

यह भी देखें कि पैरामीटर के रूप में पास नहीं होने पर भी 'ईवेंट' वैरिएबल क्यों उपलब्ध है?

— बरगी

Answer 1

आप अपने ईवेंट हैंडलर्स को गलत तरीके से घोषित कर रहे हैं:

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

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


});

हैंडलर के लिए एक पैरामीटर होने के लिए आपको "ईवेंट" की आवश्यकता है। WebKit IE के "इवेंट" के लिए एक वैश्विक प्रतीक का उपयोग करने के पुराने व्यवहार का अनुसरण करता है, लेकिन फ़ायरफ़ॉक्स नहीं करता है। जब आप jQuery का उपयोग कर रहे हों, तो वह लाइब्रेरी व्यवहार को सामान्य करता है और यह सुनिश्चित करता है कि आपके ईवेंट हैंडलर्स को ईवेंट पैरामीटर पास किया गया है।

संपादित करें - स्पष्ट करने के लिए: आपको कुछ पैरामीटर नाम प्रदान करना होगा ; का उपयोग करते हुए eventयह स्पष्ट करता है कि आप क्या करना चाहते हैं, लेकिन आप इसे कॉल कर सकते हैं eया cupcakeया कुछ और।

यह भी ध्यान दें कि संभवतः आपको "नेटिव" (क्रोम और IE और सफारी में) के बजाय jQuery से दिए गए पैरामीटर का उपयोग करना चाहिए, यह है कि एक (पैरामीटर) मूल इवेंट ऑब्जेक्ट के चारों ओर एक jQuery आवरण है। आवरण वह है जो ब्राउज़र में ईवेंट व्यवहार को सामान्य करता है। यदि आप वैश्विक संस्करण का उपयोग करते हैं, तो आपको वह नहीं मिलता है।

Comments

बहुत धन्यवाद। meteor.js इवेंट वर्जन का एक बहुत उपयोग करता है। समारोह () {.... बिना पासिंग इवेंट अभी भी क्रोम और सफारी में काम करता है। हालाँकि फ़ायरफ़ॉक्स विफल हो जाएगा।

— जिमी एमजी लिम

Answer 2

यह है क्योंकि आप समारोह eventमें पारित करने के लिए भूल गया click:

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

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

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

साइड नोट पर, eआमतौर पर शब्द के विपरीत अधिक उपयोग किया जाता है eventक्योंकि Eventअधिकांश ब्राउज़रों में एक वैश्विक चर है।

Comments

... बेशक फ़ायरफ़ॉक्स को छोड़कर! यह पैरामीटर के लिए "ईवेंट" नाम का उपयोग करने के लिए चोट नहीं करता है, क्योंकि यह आरक्षित शब्द या कुछ भी नहीं है।

— नुकीले

बहुत सच है, मुझे लगता है कि मैं सिर्फ ejQuery से उठाया है ! @ पॉइन्टी

— मार्क पाइज़्ज़क - ट्रिलोन।