Question

正如标题所说，我有一个问题，即绑定到下拉选择列表中的更改 - 似乎“更改”不适用于IE（7或8），所以当我尝试替代并使用“点击”事件，它适用于IE，但在Chrome中不起作用！我错过了一些明显的东西吗？

这是我的代码：

//event handler for showing hidden form elements (also ensures only relevant hidden els shown)
        //IE needs click event instead of change
        $('.select_change').live("change", function(){
            //check if value is other
            if ($(this).val() == 'other') 
                $(this).parent().find(".hidden").show();
            //if user changes select value from other then hide input
            if ($(this).val() != 'other') 
                $(this).parent().find(".hidden").hide();
            return false;
        });

下拉HTML如下：

<select id="title" name="title" class="validate[required,funcCall[validateNotDefault]] select_change" >
<option value="default" selected="selected">Please choose from options</option>
<option value="yellow">Yellow</option>
<option value="black">Black</option>
<option value="chocoloate">Chocolate</option>

<option value="other">Other</option>
</select>

Answer 1

尝试使用$ .bind（）或$ .change（）代替。我以前没有遇到过这个问题。

$('.select_change').change(function(){
            //check if value is other
            if ($(this).val() == 'other') 
                $(this).parent().find(".hidden").show();
            //if user changes select value from other then hide input
            if ($(this).val() != 'other') 
                $(this).parent().find(".hidden").hide();
            return false;
        });

Answer 2

change在IE中仍然没有完全正确地冒泡，你可以在两种情况下都这样做：

$('.select_change').live("change click", function(){
   $(this).parent().find(".hidden").toggle($(this).val() == 'other');
});

这仍然使用.live()，只响应这两个事件......因为你所做的事情不会因为一次或两次射击而受到伤害，所以在这种情况下这样做很好。使用.toggle(bool)稍微简化逻辑，上面的内容会稍微缩短一点。

Answer 3

我假设您正在使用.live（）方法，因为您可能会在呈现文档后添加更多选择对象。否则.bind（）或.change（）应该足以满足您的需求。

既然你已经提到.live（“click”）将与IE一起工作，而.live（“更改”）将与其他所有工作一起使用，你可以使用.live（“点击更改”），因为.live将接受多个，以空间分隔的事件。

Answer 4

要修复IE中的“更改”问题，我就是这样做的。

这可能是IE中带有输入字段的problem with a race condition。通过创建一个单独的线程来处理UI更改，onChange应该在IE中正确触发。

我通过在我的更改处理程序中执行以下操作来解决类似情况：

if (jQuery.browser.msie) {
    setTimeout(DoSomeUIChange, 0);
} else {
    DoSomeUIChange();
}

DoSomeUIChange在一个单独的线程中被触发，因此删除了竞争条件。

jQuery选择更改/单击问题 - 更改在IE中不起作用，单击在Chrome中不起作用

4 个答案: