页面加载后添加 jQueryMobile 元素

Question

考虑以下非常简单的代码摘录：

(...)
<div id="myDiv"></div>

<script>
    function appendSomeJQueryMobileStuff() {
        $('#myDiv').append($('<select/>'));
    }

    appendSomeJQueryMobileStuff();

    $(document).on('pageinit', function() {
        appendSomeJQueryMobileStuff();
    });

</script>

（试试@https://jsfiddle.net/ca544oob/）

为什么只有第一个<select>显示为jQuery，而第二个根本没有格式化？我看到的两个函数调用之间的唯一区别是它发生的时间。

我该如何解决这个问题？

Answer 1

使用 jQuery 移动版，select 菜单 插件会在任何包含 select 菜单的页面上自动初始化，无需markup.You 中的 data-role 属性可以从官方文档 here 中查看详细信息。在您的情况下，您要在 pageinit 上附加 select ，因此您需要通过添加

手动初始化 select menu plugin

$( "select" ).selectmenu();

之后

 $('#myDiv').append($('<select/>'));

您的最终工作代码将类似于..

(...)
<div id="myDiv"></div>

<script>
    function appendSomeJQueryMobileStuff() {
        $('#myDiv').append($('<select/>'));

    }

    appendSomeJQueryMobileStuff();

    $(document).on('pageinit', function() {
        appendSomeJQueryMobileStuff();

    // Initialization of Select Menu Plugin
        $( "select" ).selectmenu();
    });

</script>

希望它对你有用。

页面加载后添加 jQueryMobile 元素

Adding jQueryMobile elements after page load

jquery

page-init

jquery-mobile