jQuery Mobile在页面更改时打破了Twitter Typeahead.js

Question

有人知道更改jQuery Mobile页面时Twitter Typeahead.js会中断的原因吗？

http://jsfiddle.net/frank_o/ajkrguns/6/

HTML：

<div id="page1" data-role="page">
    <div data-role="content">
        <div class="text">
          <input class="typeahead" type="text" placeholder="States of USA">
        </div>
        <a>Go to <a href="#page2">page 2</a>
    </div>
</div>
<div id="page2" data-role="page">
    <div data-role="content">
        <div class="text">
          <input class="typeahead" type="text" placeholder="States of USA">
        </div>
        <p>Back to <a href="#page1">page 1</a></p>
    </div>
</div>

JS（来自Typeahead.js演示）：

$('.search input').each(function() {
  $(this).typeahead({
    hint: true,
    highlight: true,
    minLength: 1
  }, {
    name: 'states',
    displayKey: 'value',
    source: substringMatcher(states)
  });
});

Answer 1

只需将您的代码包装在pagecreate中，即可在目标网页event.target内初始化 textinput 。

$(document).on("pagecreate", function (event) {
    $('.typeahead', event.target).typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'states',
        displayKey: 'value',
        source: substringMatcher(states)
    });
});

  

<强> Demo