1

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

页面加载时出现第一个按钮（原始按钮）： 在此处输入图像描述

通过单击黄色框插入第二个按钮（插入的按钮）： 在此处输入图像描述

这里的问题是，插入的按钮无法赶上 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>
4

2 回答 2

2

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

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

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

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

于 2012-08-27T14:43:50.810 回答
2

插入按钮的 html 后：

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

你可以调用.trigger('create')它的容器来调用它的内容的 jQuery-mobile 渲染器，所以你的行看起来像这样：

$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
于 2012-08-27T14:45:43.763 回答