IE7/IE8 与 JQuery 的交互 .removeAttr('disabled')，不应用 css [英] IE7 / IE8 interaction with JQuery .removeAttr('disabled'), not applying css

问题描述

这与其说是一个问题，不如说是一种好奇，但我想知道为什么以下内容不起作用.

假设我有一个带有选择器和提交按钮的 html 表单.

 
<选择名称=活动"id=活动"><option value="1" >活动 1</option><option value="2" >活动2</option></选择><input type="submit" class="submit" id="add" value="添加>>"/></表单>

然后我有一个定义了 jQuery 的 ajax 调用

$('#activity').change(function() {tryDisable($('#activity').val());});功能tryDisable(活动){$.ajax({类型:'获取'，内容类型:'应用程序/json'，缓存:假，url: '/foo/checkActivity',数据: {活动:活动},成功:功能(禁用提交){if (disableSubmit == "true") {$('#add').attr('禁用', 'true');} 别的 {$('#add').removeAttr('禁用');//IE 中的问题，没有去掉禁用的 CSS//$('#add').css({"text-align" : "center"});//不知道为什么上面解决了这个问题，TODO找出来}},数据类型:'json'});返回假；}

您会在我的评论中看到，只是 .removeAttr('disabled') 导致按钮重新启用，但该按钮仍然看起来像它已禁用(变灰).但是，如果我像我在注释掉的行中所做的那样通过 jquery 对 css 进行挠痒痒"，则将应用正确的非禁用样式.正如我所料，Firefox 和 Chrome 仅在第一行就可以正常工作.

有谁知道为什么会这样?IE 在这里做什么这么奇怪?

解决方案

我以前也遇到过同样的问题.我在谷歌上搜索并从 jQuery 网站 中找到了这个注释.

注意: 尝试使用 .removeAttr() 删除内联 onclick 事件处理程序不会在 Internet Explorer 6 中达到预期效果、7 或 8.为避免潜在问题，请改用 .prop():

$element.prop("onclick", null);console.log("onclick 属性:", $element[0].onclick);//-->空值

我还在 SO 中找到了几篇关于 .removeAttr() 的帖子:

• removeAttr() 问题
• .prop('checked',false) 或 .removeAttr('checked')?

John Resig 的这篇帖子也很有帮助.>

This is more of a curiosity than a question, but I'm wondering why the following isn't working.

Say I have an html form with a selector and a submit button.

 <form action="/foo/createActivity" method="post" name="activityform" id="activityform" >

<select name="activity" id="activity" >
<option value="1" >Activity 1</option>
<option value="2" >Activity 2</option>
</select>
<input type="submit" class="submit" id="add" value="Add >>"/>
</form>

Then I have an ajax call with jQuery defined

$('#activity').change(function() {
    tryDisable($('#activity').val());
});

function tryDisable(activity) {
$.ajax({
    type: 'GET',
    contentType: 'application/json',
    cache: false,
    url: '/foo/checkActivity',
    data: {
        activity: activity
    },
    success: function(disableSubmit) {

        if (disableSubmit == "true") {
            $('#add').attr('disabled', 'true');
        } else {
            $('#add').removeAttr('disabled'); // Problem in IE, doesn't take away CSS of disabled
            // $('#add').css({"text-align" : "center"}); 
            // NO idea why the above fixes the problem, TODO find out
        }
    },
    dataType: 'json'
});
return false;
}

You'll see in my comments that just the .removeAttr('disabled') is causing the button to re-enable, but the button still looks like it's disabled (gray-ed out). However, if I 'tickle' the css via jquery as I did in the commented out line, the correct, non-disabled styling applies. Firefox and Chrome work fine with just the first line, as I expected.

Does anyone know why this might be? What's IE doing here that's so odd?

解决方案

I did have the same problem before. I googled it and found this note from jQuery website.

Note: Trying to remove an inline onclick event handler using .removeAttr() won't achieve the desired effect in Internet Explorer 6, 7, or 8. To avoid potential problems, use .prop() instead:

$element.prop("onclick", null);
console.log("onclick property: ", $element[0].onclick); // --> null

I also found a couple of posts here in SO regarding the .removeAttr():

• removeAttr() issue
• .prop('checked',false) or .removeAttr('checked')?

This post by the John Resig is also helpful.

这篇关于IE7/IE8 与 JQuery 的交互 .removeAttr('disabled')，不应用 css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！