jQuery移动版:如何使用通过Ajax获取的div绑定插件

Question

我正在尝试将DatePicker插件添加到JQM应用程序中。当HTML代码在我的应用程序中是静态的时，一切工作正常，但是当我通过Ajax拉取HTML时，插件停止初始化(我检查并将所有插件文件加载到浏览器中，控制台中没有错误，只是什么都没有发生)。

我确信这是因为插件需要一个HTML标签来保存(在本例中是“input”)，而这个标签在加载时并不存在--当Ajax从服务器文件中获取它时，它会显示需要一秒钟的时间。

代码很简单。

插件(由Ajax拉入HTML文件)：

<input type="text" data-field="datetime" readonly>
<div id="dateBox"></div> // space for plugin's calendar

插件初始化：

$(document).on('pageshow', '#page-id-where-input-is-appended', function() {           
  $("#dateBox").DateTimePicker(); 
});

我认为解决这个问题意味着在初始化时使用适当的JQM方法。我使用了页面显示，以及一些在页面DOM准备好之后工作的不同方法-从pageinit到pagechange。现在成功了。

有什么建议吗？

Answer 1

试一试

<input type="text" data-field="datetime" id="calendar_box" readonly>
<div id="dateBox"></div>

$(document).on('pageshow', '#page-id-where-input-is-appended', function() {           
  $("#calendar_box").DateTimePicker(); 
});