Question

如果我动态更改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-function loadContent(content)只是将给定参数作为普通html加载到具有类content的所有div元素中。

加载html代码后，执行触发器create。这是因为html代码应该使用jQuery移动样式显示。

代码示例在开头加载按钮Button0，点击Change content后会有一个按钮Button1而不是Button0。这很好。

但如果最初的loadContent - 调用包含input标记，则无效。在回忆input后，loadContent元素仍然存在。

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

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

在回忆input之后，有谁知道为什么loadContent元素仍然存在？

谢谢，

祝你好运凯文

Answer 1

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

代替.enhanceWithin()，使用版本1.4

$(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）并省略未压缩的。

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

1 个答案: