Omar Omar - 1 year ago 218
Javascript Question

Jquery OnClick not working in Firefox only

I'm displaying a dropdown 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.
(Pen works in Chrome, not Firefox!)


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


$('.dropdown .dropdownlink, .dropdown .dropdownlink .thelabel').click(function () {
var dropdownLinkID =;
$('#' + 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);


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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download