开发者

Safari Ajax bug? checked radio not checked

开发者 https://www.devze.com 2023-02-17 16:03 出处:网络
In Safari, If I load a piece of html via XHR (ajax) the browser does not render the radio button that has the checked=\"checked\" attribute as checked.

In Safari, If I load a piece of html via XHR (ajax) the browser does not render the radio button that has the checked="checked" attribute as checked.

the html I fetch via ajax:

<input type="radio" name="radiotest" value="off">
<input type="radio" name="radiotest" value="on" checked="checked">

the browser renders two unchecked radio buttons. If I load the exact same code directly from a plain html file (no ajax) the radio buttons render as they should, the last being in its checked state.

what's wrong, is this a known bug? Is there a fix available?

EDIT:

Probing further this looks like a browser bug, and I could not so far fix it with jQuery Post processing, any help appreciated.. here is what I've found:

I have a page that pulls in some form element via ajax. The html is this:

<input type="checkbox" name="checktest">
<input type="checkbox" name="checktest" checked="checked">

<input type="radio" name="radiotest" value="off">
<input type="radio" name="radiotest" value="on" checked="checked">

after the form element are pulled in, the checkboxed render correct, but the radios both render unckecked. Now, If i run the following jQuery command (from the Safari 5 console):

$('#activemodules input[checked="checked"]');

..it returns an object containing the one checked checkbox.

but if I run the command:

$('#activemodules input[value="on"]');

it actually retuns the correct object, and it even shows its outerHTML property correct like this:

outerHTML: "<input type="radio" name="radiotest" value="on" checked="checked">"

now, if I do:

 $('#activemodules input[value="on"]').attr('checked','checked');

Safari get's it, and renders it correctly. I guess I'll just have to pass a data-ischecked="true" attribute and us开发者_JS百科e that to catch and 're-check' all radio buttons after the ajax bit is loaded.. but still, even if I can do this, I'd like to hear any comment or suggestions on this.


This is what my solutions ended like:

First I add a data-ischecked="1" attribute to the radios that are checked:

<input type="radio" name="foo" data-ischecked="1" value="bar" checked="checked">

then, after the ajax call succeeds and finishes I run this:

$('#myradios :radio')
.each(function(){
    if( $(this).data('ischecked') ){
        $(this).attr('checked','checked');
        $(this).removeAttr('data-ischecked');
    }
});

This seems to work fine.. but I found out some other stuff of importance:

If I called the data attribute simply data-checked instead of data-ischecked it DID NOT WORK, maybe this is a reserved name?

And also; if I ran the operation on the broader selector scope:

$(':radio')
    .each ...

then it also DID NOT WORK

I don't know why, but adding the id of a parent element of the radios that was also part of the html returned by the ajax call to the selecor scope like this:

$('#myradios :radio')

made it work..


I found that mikkelbreum's solution only worked if I did not include the "checked" attribute in the AJAX-injected code.

<input type="radio" name="foo" data-ischecked="1" value="bar">
0

精彩评论

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