JQM - 仅在加载时注入动态内容

Question

我正在尝试使用自定义模板填充功能在加载时（最新 jQM 版本）动态填充选择标记。

如果在“pagebeforechange”事件中调用了 fn，则 select 标签被正确初始化。由于在每次页面转换时都会调用此事件，因此我想将 fn 移至“pageinit”事件。这不起作用，大概是因为 DOM 尚未完全可用。如何强制 jQM 在页面中只注入一次内容？目前，我正在使用kludge。肯定有更聪明的方法。感谢您的任何建议。

  $(document).bind('pageinit', function () {
     InitSelTagTest("#selActTag", "tplTag"); // Does not work.
  });

  $(document).bind("pagebeforechange", function (e, data) {        
     if ($("#selActTag").children().size() === 0) {
        InitSelTagTest("#selActTag", "tplTag"); // Kludge, but it works
     }
  });

  function InitSelTagTest(el,tpl) { // Append all tags to element el      
     var lstAllTags = JSON.parse($("#hidTag").val()); // Create tag array

     // Retrieve html content from template.
     var cbeg = "//<![" + "CDATA[", cend = "//]" + "]>";
     var rslt = tmpl(tpl, { ddd: lstAllTags }).replace(cbeg, ").replace(cend,");            

     $(el).html(rslt).trigger("create"); // Add to DOM.
  }

编辑 针对 Shenaniganz 的评论，“pagebeforecreate”事件似乎可以解决问题，即。

$("#pgAct").live("pagebeforecreate", function () {
    // Populate tag select. Works. Traversed only once.      
    InitSelTag("#selActTag", "tplTag"); 
});

Answer 1

我不确定我是否完全理解你的问题，但我会在那里抛出一些东西，如果我可以进一步扩展，你让我知道。

要在页面加载时仅触发一次，您可以尝试实现常规 JQuery $(document).ready(function(){}) aka $(function(){})，这正是 JQuery Mobile 用户被告知不要使用它的确切原因。它仅在 DOM 加载时触发一次。其他页面不会触发它，因为它们是通过 Ajax 切换的。

除此之外，在常规动态内容加载时，您可以看看我之前为其他人整理的以下示例：

http://jsbin.com/ozejif/1/edit