开发者

why doesn't IE8 refresh textbox right away?(Jquery)

I have 3 radio buttons and one textbox in my page. These 3 radio controls, representing corresponding choices and among them, the third one enables textbox that is disabled by default. If user clicks any one from the first twos after clicking the third, the textbox will be emptied(if user input any) and disabled again. The problem is, in IE, the textbox isn't emptied not until I click back once again on the said textbox. I've used jquery val methods as well as attr but nothing seems to work. You can see my code as follows. The very same code works just fine in Mozilla. I'm not sure why IE is having problem.

        m.bind_eventform = function(){
     $('input[name=poster]').change(function(){
      if($('input[name=poster]:checked').val()==2) $('#poster_other').removeAttr('disabled');
      else if(!($('#poster_other').is(':disabled'))) 
      {
       $('#poster_other').attr('disabled','disabled');
       $('#poster_other').attr('value',''); //this one doesn't work
       $('#poster_other').val(''); //as well as this one
      }
     });
    };

$(document).ready(m.bind_eventform);

EDIT - Markup added per request

<div class="formwrapper">
                    <div style="float:left"><input type="radi开发者_运维知识库o" name="poster" value="0" checked="checked" style="float:left;">
                        <span style="float:left;margin:0 0 0 5px">owner</span></div>
                    <div style="float:left;margin-left: 80px"><input type="radio" name="poster" value="1" style="float:left;">
                        <span style="float:left;margin:0 0 0 5px">agent</span></div>
                    <div style="float:right;margin-left:40px"><input type="radio" name="poster" value="2"  style="float:left;">
                        <span style="float:left;margin:0 0 0 5px">others</span>
                        <input type="text" id="poster_other" size="40" style="float:left;margin:0 0 0 5px" disabled="disabled"></div>
                    <div style="clear:both"></div>
                </div>


Have you tried this

$('#poster_other').val(''); 

before calling:

$('#poster_other').attr('disabled','disabled');

Maybe you can setup a http://www.jsbin.com page with the non-working code


Make sure your IE is running in IE8 browser mode and IE8 document mode (Check in Tools.Developer Tools). Sometimes it runs under Quirks or compatibility mode and that can cause problem.

This is what I do to make sure IE8 is rendering my html in IE8 mode.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>      
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" />

The important part is the X-UA-Compatible meta tag.


Just found the culprit with the help of Jsbin. It's jquery 1.3.2 bugs which causing this problem. After change using to 1.4.0, it works as I wanted. Thanks to all for prompt replies. Cheers

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜