CODEWITHSUNDEEP
javascriptjquery
Omar
Omar

Reputation: 806

Jquery OnClick not working in Firefox only

I'm displaying a dropdown <ul> onclick, and onclick for each li in that dropdown, I'm sending the data value into a hidden field. This works perfectly in Chrome and Safari, but none of the onClick's work in Firefox. I do also have dynamic variables. I don't think it's related to the issue though.

http://codepen.io/omarel/pen/KgQbqo (Pen works in Chrome, not Firefox!)

HTML

 <div class="dropdown">
        <input type="text" class="hide" id="formdata_price_range" name="formdata_price_range" value="">
        <div class="holdalink"><a href="javascript:;" id="price_range" class="btn dropdownlink">price range</a> <span class="icon downarrow"></span></div>
        <ul id="price_range-options" class="options">
            <li id="option1" data-value="1,000,000-$1,500,000" class="dropdown-option" onclick="chooseDropDownOption(this);">1,000,000-$1,500,000</li>
            <li data-value="1,500,000-$2,000,000" class="dropdown-option" onclick="chooseDropDownOption(this);">1,500,000-$2,000,000</li>
            <li data-value="2,500,000-$3,000,000" class="dropdown-option" onclick="chooseDropDownOption(this);">2,500,000-$3,000,000</li>
        </ul>
    </div>

JQUERY

    $('.dropdown .dropdownlink, .dropdown .dropdownlink .thelabel').click(function () {
        var dropdownLinkID = event.target.id;
        $('#' + dropdownLinkID + '-options').toggleClass("on");
        $('#' + dropdownLinkID).toggleClass("on"); //add on to link. Only needed if using showoverlay (optional)
        $('.contactholder .overlay').fadeToggle(100); //showoverlay  (optional)
    });

 function chooseDropDownOption(el) {
        var dropdownUL = $(el).closest('ul').attr('id'); 
            //get value of the class to add .on to
        var selectionValue =  $(el).attr('data-value'); 
           // get data value of li selection to update label and input field
        var dropdownLinkID = dropdownUL.substr(0, dropdownUL.indexOf('-'));
        $('#' + dropdownUL).toggleClass("on");
        $('#' + dropdownLinkID).html(selectionValue);
        $('#formdata_' + dropdownLinkID).val(selectionValue);
    }

CSS

 .dropdown .options {
    visibility: hidden;
    opacity: 0;
}
.dropdown .options.on  {
    visibility: visible;
    opacity:1;
}

Upvotes: 0

Views: 1716

Answers (4)

Sreekanth
Sreekanth

Reputation: 3130

For folks trying to find out the reason behind it, here is the thread thats describes it.

Why is 'event' available globally in Chrome but not FF?

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

event is not available as a global in all browsers

Use the argument provided by event handler

$(selector).click(function (event) {...

The error in browser dev tools console is an immediate clue

Upvotes: 3

soywod
soywod

Reputation: 4510

Try to add event in your func call :

$('.dropdown .dropdownlink, .dropdown .dropdownlink .thelabel').click(function (event) {
    var dropdownLinkID = event.target.id;
    $('#' + dropdownLinkID + '-options').toggleClass("on");
    ...

Next time, check your console, in firefox I got ReferenceError: event is not defined

Upvotes: 0

Panagiotis Vrs
Panagiotis Vrs

Reputation: 842

you forgot to pass the event

$('.dropdown .dropdownlink, .dropdown .dropdownlink .thelabel').click(function (**event**) {

Upvotes: 0

Related Questions