javascript - Ajax 请求，使用 javascript 更新 html 但样式不存在

Question

抱歉奇怪的标题，我目前正在制作网页，当根据请求加载页面时，我在“head”标签中调用以下两个脚本来制作漂亮的动态按钮效果。

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

然后用户可以在加载的页面上更新他们的请求，我使用 AJAX 来收集信息。

然后我用返回的 json 对象中的数据为新的 html 创建一个字符串。代码如下所示，但 += 在一个循环中。

htmlTag ='';                                 
htmlTag += '<div data-role="main" class="ui-content"> <div data-role="collapsible"><h5>'+ json_data[i] +'</h5></div></div>'

然后我更新一个 div，将它的 innerhtml 作为这个字符串。html 更新为我想要的值，但 css/jquery 不适用于按钮效果。

有人知道为什么会这样吗？

它使用这些 div 类 uisng jinja 在第一时间完美加载。

Answer 1

jquery mobile 附加的事件在页面加载时添加到特定元素。当您使用 ajax 添加这些元素时，它们将不会以与页面加载时不存在的相同方式绑定(bind)事件。

将这些动态元素添加到 DOM 后，您需要触发 jquery mobile pagecreate 方法。这应该以与它们最初存在时相同的方式绑定(bind)它们。

see api documentation here