Question

我正在尝试让jQuery根据类获取一些li元素。

在FF和IE中，一切都运行顺利，但webkit浏览器不会触发click事件。我通过JSLint运行代码，它恢复有效，我也没有通过Chrome中的控制台获得错误。

查看

$(document).ready(function () {
    $('#countryList option').click(function () {
        var myCountry;
        $('#countryList').change(function () {
            myCountry = $(this).val();
        }).change();
        $('#premier ul, #popular ul, #recommended ul, #supported ul').empty();
        $('.' + myCountry + '.Popular').clone().appendTo('#popular ul');
        $('.' + myCountry).not('.Premier, .Popular').clone().appendTo('#supported ul');
        $('#Display div, #premier ul, #popular ul, #supported ul').removeClass();
        $('#Display div').addClass(myCountry);
    });
    $('#expandButton').click(function () {
        $('#supportedWrapper').animate({
            height: ($('#supported').height() + 100)
        }, 1200);
    });
});

Answer 1

仅处理下拉列表的change事件：

$(document).ready(function () {
    $('#countryList').change(function () {
        var myCountry = $(this).val();
        $('#premier ul, #popular ul, #recommended ul, #supported ul').empty();
        $('.' + myCountry + '.Popular').clone().appendTo('#popular ul');
        $('.' + myCountry).not('.Premier, .Popular').clone().appendTo('#supported ul');
        $('#Display div, #premier ul, #popular ul, #supported ul').removeClass();
        $('#Display div').addClass(myCountry);
    });
    $('#expandButton').click(function () {
        $('#supportedWrapper').animate({
            height: ($('#supported').height() + 100)
        }, 1200);
    });
});

DEMO： http://jsfiddle.net/XS5Bz/

我不确定您在点击单个<option>时尝试做什么，但没有必要，并且您每次都将新的change事件绑定到下拉列表单击了<option> ...这是过度杀伤而且不完全正确。

更改选定的change时会发生<option>事件，因此应该只需要它。

Answer 2

只需将change事件绑定到<select>元素即可，而不是通过复杂的方式获取当前值并触发更改。这是一个工作小提琴

http://jsfiddle.net/Yq3d9/13/

jQuery单击不在webkit浏览器中触发

2 个答案: