jQuery mobile：动态加载内容（文本框问题）答案

【问题标题】：jQuery mobile: Dynamically loading content (problems with textbox)jQuery mobile：动态加载内容（文本框问题）
【发布时间】：2014-06-05 19:37:05
【问题描述】：

如果我动态更改 div 的 html 内容，我只是遇到了 jQuery mobile 的问题。这是我的问题的最小代码，之后有详细描述：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
        <link rel="stylesheet" href="css/custom.css">
        <script src="js/jquery.js"></script>
        <script src="js/jquery.mobile-1.4.2.js"></script>
        <script src="js/jquery.mobile-1.4.2.min.js"></script>
        <script>
            function loadContent(content) {
                $('div.content').html(content);
                $('div.content').trigger('create');
            }

            $(function() {
                //loadContent('<input type="text" />'); <-- doesnt work
                loadContent('<button>Button0</button>');
                $('#change').click(function() {
                    loadContent('<button>Button1</button>');
                });
            });
        </script>
    </head>
    <body>
    <div data-role="page" id="page">
      <div data-role="panel" data-display="overlay" id="myPanel"> 
        <h1>Menu</h1>
        <p>You can close the panel by clicking outside the panel, pressing the Esc key or by swiping.</p>
      </div> 

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

      <div data-role="main" class="ui-content">
        <div class="content"></div>
        <button id="change">Change content</button>
      </div>

      <div data-role="footer">
        <div class="select-language">
        </div>
      </div> 
    </div> 
    </body>
</html>

该页面包含一个类为content 的div。 javascript 函数 loadContent(content) 只是将给定的参数作为纯 html 加载到类为 content 的所有 div 元素中。

加载 html 代码后，触发器create 被执行。这是因为 html 代码应该以 jQuery mobile 样式显示。

代码示例在开头加载了一个按钮Button0，在您单击Change content 后，将出现一个按钮Button1 而不是Button0。这很好用。

但是，如果最初的 loadContent-call 包含 input 标记，它将不起作用。调用loadContent 后，input 元素仍然存在。

为了测试这一点，我添加了一个注释行。（初始化函数的第一行）。

我发现只有在我为create 添加触发器时才会发生这种情况，但如果没有触发器，内容看起来很难看。

有没有人知道为什么在召回loadContent 后input 元素仍然存在？

谢谢，

最好的问候凯文

【问题讨论】：

标签： javascript html jquery-mobile dynamic-content

【解决方案1】：

您应该使用 jQuery Mobile 页面事件而不是 $(function() {...，例如 pagecreate。也可以用 1.4 版代替 .trigger("create")，使用 .enhanceWithin()：

$(document).on("pagecreate", "#page", function () {
    loadContent('<input type="text" />');
    //loadContent('<button>Button0</button>');
    $('#change').click(function () {
        loadContent('<button>Button1</button>');
    });
});

function loadContent(content) {
    $('div.content').html(content).enhanceWithin();
}

DEMO

在您发布的源代码中，您添加了两次 jQM 库。只需添加最小化的（jquery.mobile-1.4.2.min.js）并忽略未压缩的。

【讨论】：