スタイルシートの引継ぎについて

jqueryのスタイルシートを引継ぎたいのですが、

<head>で

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

を指定しています。

<body> では下記ソース（あくまでもテスト用）

複数いるユーザーをDBから検索してきて
以下のユーザーリストの部分にユーザー名1と同様のスタイルで表示したい
ユーザー１の下に
ユーザー２、ユーザー３
と直接記述すれば、
ユーザー２、３も正しく（思うとおりに）表示され
ラジオボタンで指定し、選択することができる
user_sel() の動作は確認済み

ただ、ユーザー数は可変なので、

<body>に直接記述するわけにはいかず

function user_list() といった
関数で
表示したい内容(html)をユーザー１にならって
変数（たとえばdisphtml)に代入し

document.getElementById("next").innerHTML = disphtml;

としても
直接記述したようなスタイルにならない

CSSが引き継げていない、というのである、ということなのだと思うが
これをどうにかしたい

本当はユーザー名１も含めて可変にしたい

ご指導お願いします。

<div data-role="page">
	<div id="a">
               画面Aの中身
            </div>
            <div id="user-list">
		<div data-role="header">
			<h1>ユーザーリスト</h1>
		</div>
		<div style="text-align:center;">
			<span id="msg">ユーザーを選択してください</span>
		</div>

		<div role="main" class="ui-content">
			<form name="user_select" action="#">
				<div class="ui-field-contain">
					<input type="button" id="login-btn" class="ui-btn ui-shadow ui-corner-all ui-mini" onClick="user_sel()" value="ユーザー選択">
				</div>

				<li class="ui-li-has-thumb" data-icon="false" style="list-style-type:none;">
				<a class="ui-btn">
				<img src="icon.jpg" align="left">
					<input type="radio" name="user_id" class="guestclass" value="1111" id="userno1" data-cacheval="false">
					<label for="userno1" class="ui-button ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox off">
						ユーザー名1（ニックネーム)
					</label>
				</a>
				</li>

				<div id="next"></div>
			</form>
		</div>
	</div>
	<div id="c">

		画面Cの中身

	</div>
</div>

行動規範の内容に同意します

回答2件

CSSというより、動的に追加したソースにJavaScript（jQuery Mobile）が適用されていないのが原因だと思います。
動的に要素を追加した後に以下のメソッドを実行すれば適用することができるようです。

$("input[type='radio']").checkboxradio().checkboxradio("refresh");

■ サンプル

lang
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
6    <title>xxxx</title>
7    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
8    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
9    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
10    <script>
11       $(function(){
12         //動的に項目を追加する
13         for(var i=0; i<5; i++){
14           var source ='';
15           source += '<li class="ui-li-has-thumb" data-icon="false" style="list-style-type:none;">';
16           source += '<a class="ui-btn">';
17           source += '<img src="icon.jpg" align="left">';
18           source += '<input type="radio" name="user_id" class="guestclass" value="1111" id="userno' + i + '" data-cacheval="false">';
19           source += '<label for="userno' + i + '" class="ui-button ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox off">';
20           source += 'ユーザー名' + i + '（ニックネーム)';
21           source += '</label>';
22           source += '</a>';
23           source += '</li>';
24           $("#list").append(source);
25         }
26         //jQuery Mobileを適用させるメソッド
27         $("input[type='radio']").checkboxradio().checkboxradio("refresh");
28       });   
29    </script>
30</head>
31<body>
32    <div data-role="page">
33        <div id="a">
34                   画面Aの中身
35                </div>
36                <div id="user-list">
37            <div data-role="header">
38                <h1>ユーザーリスト</h1>
39            </div>
40            <div style="text-align:center;">
41                <span id="msg">ユーザーを選択してください</span>
42            </div>
43
44            <div role="main" class="ui-content">
45                <form name="user_select" action="#">
46                    <div class="ui-field-contain">
47                        <input type="button" id="login-btn" class="ui-btn ui-shadow ui-corner-all ui-mini" onClick="user_sel()" value="ユーザー選択">
48                    </div>
49                    <ul id="list">
50                        <!-- ここに項目を追加 -->
51                    </ul>
52                </form>
53            </div>
54        </div>
55        <div id="c">
56
57            画面Cの中身
58
59        </div>
60    </div> 
61</body>
62</html>

■ 参考サイト
http://www.infoscoop.org/blogjp/2013/02/12/jquery-mobile%E3%81%A7%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97html%E3%82%92%E5%8B%95%E7%9A%84%E3%81%AB%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E4%BD%BF%E3%81%86/

投稿2015/06/22 02:42

編集2015/06/22 02:49

ina

総合スコア127

innerHTMLで<div id="next"></div>のなかに下記のようなユーザー２のhtmlは出力できているのですよね？

lang
1<li class="ui-li-has-thumb" data-icon="false" style="list-style-type:none;">
2   <a class="ui-btn">
3   	<img src="icon.jpg" align="left">
4   	<input type="radio" name="user_id" class="guestclass" value="1111" id="userno2" data-cacheval="false">
5   	<label for="userno2" class="ui-button ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox off">ユーザー名2（ニックネーム) </label>
6   </a>
7</li>

当方の環境ではinnerHTMLで出力した要素にもjQueryのCSSは適用されています。

投稿2015/06/21 11:34