jQuery Mobileのポップアップ内の選択結果を親画面に反映したいんです

javascript

よくあるやつ。よく見るのはwindow.openerがどうたらっていう書き方。

jQuery Mobileのポップアップウィジェットは同一html内に書いてあるものを擬似的にポップアップさすだけなのでwindow.openerもくそもない。
なのでごりごり書くしかないと思われる。

<div data-role="page">
    <div data-role="header">header</div>
    <!-- 親画面 -->
    <div data-role="content" id="parent">
        <a href="#sample_pop" data-role="button" data-rel="popup" data-position-to="window">popup</a>
    </div>
    <!-- ポップアップ -->
    <div data-role="popup" id="sample_pop">
        <fieldset data-role="controlgroup">
            <legend>select</legend>
            <input type="checkbox" name="item1" id="item1" value="1" />
            <label for="item1">1st</label>
            <input type="checkbox" name="item2" id="item2" value="2" />
            <label for="item2">2nd</label>
            <input type="checkbox" name="item3" id="item3" value="3" />
            <label for="item3">3rd</label>
        </fieldset>

        <a href="#" data-role="button" data-rel="back" data-inline="true">cancel</a>
        <a href="#" data-role="button" data-rel="back" data-inline="true" id="submit">reflect</a>

    </div>
    <div data-role="footer">footer</div>
</div>

$(document).ready(function () {
    $("#submit").on("click", function () {
        // 子画面選択結果反映用のdivを作る
        if (!$("#selection").get(0)) {
            $("#parent").append("<div id='selection'></div>");
        }
        
        // チェックしたチェックボックスのラベルを親画面に反映
        $("#selection").text($("#sample_pop input[type='checkbox']:checked").map(function () {
            return $("label[for='" + $(this).attr("id") + "']").text();
        }).get().join(","));
    });
});

するとこんな感じ。

なんか画面リフレッシュされちゃいますねー。。なんでや。。面倒なので放っときます。。

参考