JQuery OnClick не работает только в Firefox

Я показываю выпадающее <ul>меню onclick и onclick для каждого li в этом выпадающем списке, я отправляю значение данных в скрытое поле. Это отлично работает в Chrome и Safari, но ни одна из работ onClick в Firefox. У меня также есть динамические переменные. Я не думаю, что это связано с проблемой.

http://codepen.io/omarel/pen/KgQbqo (Pen работает в Chrome, а не в 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;
}

javascript,jquery,

0

Ответов: 4


3 принят

event недоступен как глобальный во всех браузерах

Используйте аргумент $ ( selector ). click ( функция ( событие ) {... обработчик

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

Ошибка в консоли браузера dev tools - это немедленная подсказка


0

вы забыли пройти мероприятие

event

0

Попробуйте добавить eventсвой func-вызов:

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

В следующий раз проверьте консоль, в firefox я получил ReferenceError: event is not defined


0

Для людей, пытающихся выяснить причину этого, вот поток, который описывает это.

Почему «событие» доступно глобально в Chrome, но не FF?

JavaScript, JQuery,
Похожие вопросы