2

この問題を示すHTMLページの例を次に示します。

    <!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>

このページを保存して、borwserにロードします。「テスト1」のラジオリストが水平に表示されます（data-type="horizontal"属性のために表示されます）。ただし、動的に追加される「テスト2」無線リストは、デフォルト設定である垂直方向に表示されます。data-type="horizontal"動的に作成された無線リストには影響がないようです。

これを機能させるためにDOMのどこかでトリガーする必要があることを誰かが知っているリフレッシュまたはイベントはありますか？

4

1 に答える 1

2

問題は、フォームに新しい要素を追加する方法です。javascript関数をこれに変更すると、それが機能することがわかります。

$(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');
});

このように考えてください。append（）関数が使用されるたびに、ブラウザーは、指定されたものをすべてDOMに追加しようとします。ただし、append（）のさまざまな呼び出しで要素を分割しているため、ブラウザはそれを理解しようとする必要があります。だからあなたがこれを持っているとき：

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

ブラウザは、終了divタグを省略したことを認識し、それを追加して修正しようとします。これは、append（）の次の呼び出しが、追加したdiv内ではなく、ブラウザが自動的に閉じたため、その後に行われることを意味します。

この問題を回避するには、完全で整形式の要素を追加する必要があります。

于 2012-09-10T01:39:43.050 に答える