Home/ Questions/Q 8511787
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T04:06:13+00:00

Here is an example HTML page that demonstrates the issue: <!DOCTYPE html> <html> <head>

  • 0

Here is an example HTML page that demonstrates the issue:

    <!DOCTYPE html> 
    <html> 
            <head> 
            <title>My Page</title> 
            <meta name="viewport" content="width=device-width, initial-scale=1"> 
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
            <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    </head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content" id="cp">   
        <form id="form">
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                    <legend>Test 1:</legend>
                    <input type="radio" name="r1" id="r1a" value="none" checked="checked" /><label for="r1a">A</label>
                    <input type="radio" name="r1" id="r1b" value="detail"/><label for="r1b">B</label>
                    <input type="radio" name="r1" id="r1c" value="measure"/><label for="r1c">C</label>
                </fieldset>
            </div>
        </form>     
    </div><!-- /content -->

</div><!-- /page -->


<script type="text/javascript">
$(document).ready(function() {
    var form = $('#form');

    form.append('<div data-role="fieldcontain">');
    form.append('   <fieldset data-role="controlgroup" data-type="horizontal">');
    form.append('      <legend>Test 2:</legend>');
    form.append('      <input type="radio" name="r2" id="r2a" value="none" checked="checked" /><label for="r2a">A</label>');
    form.append('      <input type="radio" name="r2" id="r2b" value="detail"/><label for="r2b">B</label>');
    form.append('      <input type="radio" name="r2" id="r2c" value="measure"/><label for="r2c">C</label>');
    form.append('   </fieldset>');
    form.append('</div');

    form.trigger('create');
});
</script>


</body>
</html>

Save this page and load it in a borwser. You will see that the “Test 1” radio list comes up horizontal (as it should because of the data-type="horizontal" attribute). However the “Test 2” radio list, which is added dynamically, comes up vertically, which is the default setting. It seems the data-type="horizontal" has no effect on the dynamically created radio list.

Is there a refresh or event anyone knows about which I should trigger somewhere in the DOM to get this to work?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is the way you are adding your new elements to the form. If you change your javascript function to this you’ll see that it works:

    $(document).ready(function() {
    var form = $('#form');

    var newElement = '';
    newElement += '<div data-role="fieldcontain" data-type="horizontal">';
    newElement += '   <fieldset data-role="controlgroup" data-type="horizontal">';
    newElement += '      <legend>Test 3:</legend>';
    newElement += '      <input type="radio" name="r3" id="r3a" value="none" checked="checked" /><label for="r3a">A</label>';
    newElement += '      <input type="radio" name="r3" id="r3b" value="detail"/><label for="r3b">B</label>';
    newElement += '      <input type="radio" name="r3" id="r3c" value="measure"/><label for="r3c">C</label>';
    newElement += '   </fieldset>';
    newElement += '</div>';

    form.append(newElement);

    form.trigger('create');
});

    Think about it this way: Each time the append() function is used the browser attempts to add whatever you’ve given it to the DOM. But because you have broken your elements across different calls to append() the browser has to try to make sense of it. So when you have this:

    form.append('<div data-role="fieldcontain">');

    The browser sees that you’ve left off a closing div tag and tries to fix it for you by adding it. This means your next call to append() will not go inside the div you just added but after it because the browser has automatically closed it for you.

    You should add complete, well-formed elements to avoid this issue.

    • 0