「検索してもjQueryMobileのサイト見ても良く分からなかったので、試行錯誤的に見つけた。ただのメモだ」
「TypeScript用?」
「jQueryMobileの問題名のでJavaScriptでも同じでいいはずだ」
HTMLパート §
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="Scripts/jquery-2.1.0.js"></script>
<script src="Scripts/jquery.mobile-1.4.2.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
TypeScriptパート §
$(document).on("pageinit", function (event) {
// チェックボックス作る
var input = document.createElement("input");
$(input).attr("type", 'checkbox');
$(input).attr("name", "Sample");
$(input).attr("value", "on");
$("#content").append(input);
$("input:checkbox").checkboxradio(); // これ重要。無いと落ちる
// チェックボックスにチェックを入れる
$("input:checkbox").prop('checked', "true");
$("input:checkbox").checkboxradio("refresh");
});
解説 §
「で、どこがポイント?」
「$("input:checkbox").checkboxradio();のところ。これが無いと例外が出て落ちる」
「なんでこれが必要なの?」
「HTMLのチェックボックスはjQueryMobileのcheckboxradio widgetで置き換えられるが、スクリプトからDOMに挿入した場合置換はそのままでは行われない。ところが、checkboxradio("refresh");の処理はcheckboxradio widgetを前提としているので、初期化する前に使うんじゃねーよ、コラ!と怒られてしまう」
「じゃあさ。checkboxradio("refresh");使わなければ面倒なおまじないは要らないの?」
「それだとHTMLに直接書いたチェックボックスと外見が微妙に違ってしまう。あっちは自動的にjQueryMobileが置き換える」
「結局必要なんだね」