3

先行入力サポートを追加しようとしている既存のイベントの多いページがあります。先行入力機能は、入力項目に 1 回しか付けられないように見えることを除いて、希望どおりに機能します。

問題は、簡単にするために、特定のアクションの後、既存のページが特定の入力に添付されたすべてのイベントを削除し $('input').off()、新しいコンテキストに応じて新しいイベント ハンドラーを再添付することです。

これにより、再アタッチされた先行入力関数が起動しないように見えるという問題が発生します。(ここで議論されている同様の別の問題があります:ブートストラップのタイプアヘッド データソースをポスト レスポンスで更新する際の問題ですが、ソースをうまく更新できるので、ここでは関係ありません - とにかくタイプアヘッドをトリガーすることはできません私が試したこと）

編集：明確にするために-（リンクされた質問のように）ソースを変更することは問題ではありません-実際のページのソースは、サーバーにリクエストを行うjs関数です。問題は、呼び出し.off()が永久にタイプアヘッドを壊すように見え、.off()ほとんどのページを書き直さなければ呼び出しを削除できないことです....以下のコードとjsfiddleは、問題を示すために私が考案できる最短のコードです

問題を文書化している作業中の jsfiddle があります: http://jsfiddle.net/hz5P3/8/

今後の参考のために、完全なコードを以下に示します。簡単に文書化するには: input.workstext_field には先行入力宣言が 1 つしかなく、正常に動作します。typeheadinput.no_works関数が呼び出された後$('.no_works').off()、この入力のすべてのイベントを削除するために呼び出されました。この関数に再アタッチされた先行入力はまったく機能しません。

この先行入力への 2 番目の呼び出しを期待どおりに機能させる方法はありますか?

ありがとう

HTML

<div class="container">
    <div class="hero-unit">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        
         <p>this is a test typeahead that will work</p>         
        <input type="text" class="works" style="margin: 0 auto;">
        
        <p>this is a test typeahead that is updated and will not work</p>
        <input type="text" class="no_works" style="margin: 0 auto;">
    </div>
</diV>​

Javascript 

$('.no_works').typeahead({
  source: ["cat", "dog", "mouse"]
});
$('.no_works').off();

$('.no_works').typeahead({
  source: ["cat", "dog", "mouse"]
});

$('.works').typeahead({
  source: ["cat", "dog", "mouse"]
});

</p>

4

1 に答える 1

7

編集：わかりました、わかりました。

そのため、その要素の jQuery オブジェクトから「typeahead」データをクリアする必要があります。100% 正しい方法ではないかもしれませんが、簡単で機能します。

http://jsfiddle.net/feXM3/

$('.no_works').typeahead({
  source: ["cat", "dog", "mouse"]
});

$('.no_works').off();

//amir75 added a line here:
$('.no_works').data('typeahead', (data = null))

$('.no_works').typeahead({
  source: ["frog", "cow", "horse"]
});

私の最初の答え: 'off' メソッドが古い先行入力機能を期待どおりに削除しているとは思いません。

代わりにこれを行うことができます：

//1. store the typeahead object in a variable
var tah= $('.no_works').typeahead({
  source: ["cat", "dog", "mouse"]
});

//2. update the data source
tah.data('typeahead').source = ["frog", "cow", "horse"];

更新された jsfiddle: http://jsfiddle.net/Skp5R/

于 2012-09-05T00:00:35.300 に答える