Question

我正在显示一个下拉列表<ul> onclick，并在该下拉列表中为每个li点击，我将数据值发送到隐藏字段。这在Chrome和Safari中完美运行，但onClick在Firefox中都不起作用。我也有动态变量。我不认为这与这个问题有关。

http://codepen.io/omarel/pen/KgQbqo （笔在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;
}

Answer 1

event在所有浏览器中都不可用作全局

使用事件处理程序

提供的参数

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

浏览器开发工具控制台中的错误是一个直接的线索

Answer 2

尝试在您的func调用中添加event：

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

下次，检查你的控制台，在firefox中我得到了ReferenceError: event is not defined

Answer 3

你忘了通过活动

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

Answer 4

对于那些试图找出其背后原因的人来说，这是描述它的线程。

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

Jquery OnClick仅在Firefox中不起作用

4 个答案: