Omar Omar - 1 month ago 7
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.

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

Answer

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

Comments