Question

<html>
<head>
<script src="resources/Metro-UI-CSS-master/jquery.widget.min.js"></script>
<link rel="stylesheet"
href="resources/Metro-UI-CSS-master/css/metro-bootstrap.css">

 <script  src="resources/Metro-UI-CSS-master/min/metro.min.js"></script>
 <script src="resources/Metro-UI-CSS-master/js/metro-dropdown.js"></script>

<Script type="text/javascript">

function getContent() {

    $.ajax({
        type : "POST",
        traditional : true,
        url : "content.htm",

        success : function(response) {

            $('#someDiv').append(response);

        },
        error : function(e) {
            alert('Error: ' + e);
        }
    });

}
</script>


</head>
<body>
<div id="someDiv">


</div>



</body>
</html>

当我从服务器（它是一个带有spring3mvc的java服务器）获取代码时。并且我把它放在html中，metro-ui可视化框架不起作用，因为在创建DOM之后新的html代码在DOM中。

我需要重新加载metro-ui的插件。我想如果我这样做，新代码就可以了。

有什么建议吗？感谢

新信息

我正在使用的库是metro.ui这里是链接 http://metroui.org.ua/。

这是标题

<!-- Metro-UI-CSS-master -->
<script src="resources/Metro-UI-CSS-master/jquery.widget.min.js"></script>
<link rel="stylesheet" href="resources/Metro-UI-CSS-master/css/metro-bootstrap.css">

<script  src="resources/Metro-UI-CSS-master/min/metro.min.js"></script>
<script src="resources/Metro-UI-CSS-master/js/metro-dropdown.js"></script>


<!--  calendar -->
<script src="resources/Metro-UI-CSS-master/docs/js/metro/metro-calendar.js"></script>
<script src="resources/Metro-UI-CSS-master/docs/js/metro/metro-datepicker.js"></script>
<!-- fin calendar -->
<!--  fin Metro-UI-CSS-master -->
<!--  calendar -->
<script src="resources/Metro-UI-CSS-master/docs/js/metro/metro-calendar.js"></script>
<script src="resources/Metro-UI-CSS-master/docs/js/metro/metro-datepicker.js"></script>
<!-- fin calendar -->

这是一个组件的示例，如果我将其包含在没有ajax的页面中，并且如果从ajax函数获取它，则它可以工作。它是文本字段中的文件上传按钮。

<div data-role="input-control" class="input-control file info-state">
<input type="file" style="z-index: 0;" tabindex="-1"><input type="text" style="z-index: 1; cursor: default;" readonly="" id="__input_file_wrapper__">
                                    <button class="btn-file" type="button"></button>
                                </div>

这是图书馆作者网站上的一个例子 http://metroui.org.ua/forms.html 在页面中查找“选择，文件，文本区域”，是文件上传示例，单击它时有一个小文件夹可以选择文件等...

Answer 1

在.append之后，您需要重新初始化Metro组件，以便他们可以更新您的UI。但是，在文档中如何做到这一点并不是很清楚，但我遇到了github issue这似乎解释了类似的问题。基于这个问题，我会尝试这样的事情。

$('#someDiv').append(response).dropdown().init();

或者，可以省略init（）并尝试

$('#someDiv').append(response).dropdown();

Answer 2

尝试使用html而不是追加，就像这样......

$('#someDiv').html(response);

AJAX请求后jQuery插件出错

2 个答案: