Question

考虑最后给出的代码，它使用jQuery Mobile来增强按钮。

页面加载时出现第一个按钮（原始按钮）： enter image description here

单击黄色框插入第二个按钮（插入按钮）： enter image description here

这里的问题是，插入的按钮无法跟上CSS样式。当我们使用AJAX时，这种情况非常常见（并不是jQuery Mobile特有的），但我始终无法找到解决此问题的解决方案或解决方法。

如何使用CSS样式增强插入的按钮？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>          

        <script type="text/javascript">
            function insert(){
                $("#result").html('<input type="button" value="Inserted button"/>');
            }
        </script>

    </head>
    <body>
        <form>

            <p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>

            <input type="button" value="Original button" />

            <div id="result">
                Button not inserted yet  
            </div>

        </form>
    </body>
</html>

Answer 1

jQuery mobile为您的对象添加了额外的元素/类。这种情况发生在页面加载上。

当您插入额外的按钮或其他对象（列表，...）时，需要再次应用样式。

在这种情况下，您在插入按钮$(_selector_for_new_button_).button();

后使用

jQuery mobile为您应用漂亮的按钮样式。

Answer 2

插入按钮的html后：

$("#result").html('<input type="button" value="Inserted button"/>');

您可以在其容器上调用.trigger('create')来调用其内容上的jQuery-mobile渲染器，因此您的行将如下所示：

$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');

Javascript插入的内容没有赶上样式

2 个答案: