jQuery：要素が削除されて再作成された場合でも、要素の機能を保持する方法は？

Question

私は問題があります..

私はユーザーが選択したときに入力テキストが消えるようにするために、私は編集する自動補完プラグインを使用します。

だから、私の目標は、ユーザーが自動補完リストから行を選択すると、次のとおりです。

1. Ajaxリクエストが選択された行（ここでは問題なし）
2. フォームに関する追加情報を取得します自動
3. オートコンプリートのある入力テキストが消えて、その場所に2つのdivと1つのXが入ります（previusの選択を解除するには）、もう1つは短い選択自体に関する情報（ここでは問題なし）
4. ユーザーX divをクリックすると、すべてがbeginとして返され、input-textはオートコンプリートとなります。
私に起こる何

、点4で、すべてが正常に動作していることですが、オートコンプリートで入力テキストを

$("div#contact-list-container").html('<input type="text" name="contact-list" id="contact-list" value="" />'); 

によって再作成されたときに、オートコンプリートはもう動作文句を言いません！

したがって、再作成時にオートコンプリート機能をフィールドに追加するにはどうすればよいですか？ユーザがそれを何度も選択および選択解除できるようにするため。

p.s：私は入力テキストでdivを非表示にしてXで表示することができますが、htmlマークアップを最小限に抑え、隠れたdivで混乱させたくないことがわかります。 可能であれば、selectのたびにinnerHTMLを変更してオートコンプリート機能を再設定したいと思います。私COSEは今どのように

ザッツ：

$(document).ready(function(){ 
    $('input#contact-list').autocomplete('test-db.php', { 
     multiple: false, 
     dataType: "json", 
     width: 400, 
     scrollHeight: 300, 
     max: 5, 
     parse: function(data) { 
      return $.map(data, function(row) { 
       return { 
        data: row, 
        value: row.azienda, 
        //result that will be used in the text field, while selected 
        result: row.code + ' - ' + row.company + ' | ' + row.name + ', ' + row.surname 
       } 
      }); 
     }, 
     formatItem: function(item) { 
      return item.code + ' - ' + item.company + '<br />' + item.name + ', ' + item.surname + '<br />' + item.email; 
     } 
    }).result(function(e, item) { 
     //this will be triggered when the selection has made 
     $.ajax({ 
      type: "POST", 
      cache: false, 
      data: "idCompany=" + item.id_company + "&idUser=" + item.id_user, 
      url: "test-db-02.php", 
      success: function(message){ 
       $("input[rel='ship']").attr("readonly", true).css("background-color", "#DFDFDF"); 
       $("input[rel='company']").attr("readonly", true).css("background-color", "#DFDFDF"); 
       var rd = json_parse(message); 

       $("input#ship-nome-referente").val(rd.company.nome); 
       $("input#ship-cognome-referente").val(rd.company.cognome); 
       //[... and so on, i change the val of many fields..] 
       //REPLACE THE INPUT-TEXT WITH THE DIVS 
       $("div#contact-list-container").html('<div id="deselect-contact">X</div><div id="selected-contact">' + rd.company.code + ' - ' + rd.company.company + ' | ' + rd.company.name + ', ' + rd.company.surname + '</div>'); 

       $("div#deselect-contact").click(function(){ 
       //REPLACE THE DIVS WITH THE INPUT-TEXT.. HOW TO REASSOCIATE THE AUTOCOMPLETE? 
        $("div#contact-list-container").html('<input type="text" name="contact-list" id="contact-list" value="" />'); 
        $("input[rel='ship']").attr("readonly", false).css("background-color", "#FFFFFF").val(''); 
        $("input[rel='company']").attr("readonly", false).css("background-color", "#FFFFFF").val(''); 
       }); 
      } 
     }); 
    }); 
}); 

Answer 1

はjQueryの1.3以来live()イベントは、ハンドルが破壊され、再作成を取得しても、ハンドルに永続的にバインドするイベントを可能に必要な機能を、持っていました。

編集：liveはjQuery 1.7では廃止され、1.9では削除されました。代わりにon()を使用して同じ効果を達成する必要があります。

詳細はhttp://api.jquery.com/on/を参照してください。

Answer 2

私はautocomplete onfocusを添付する関数を作成しました。

<input type="text" onfocus="attach(this);"/> 

それともあなたのケースでは、あなたの入力フィールド注入にONFOCUSの一部を追加します：あなたはこのようなあなたの入力を持っているときに

$("div#contact-list-container").html('<input type="text" name="contact-list" id="contact-list" value="" onfocus="attach(this);"/>'); 

あなたは添付し、以下のような機能を使用することができますオートコンプリートプラグイン。 （注：複数の添付ファイルを防ぐための属性を設定します）

function attach(element){ 

    var $element = jQuery(element); 

    // check if autocomplete was already attached 
    if($element.attr("autocomplete.attached")){ 
     return; 
    } 

    // attach autocomplete 
    $element.autocomplete(...); 

    // set a marker 
    $element.attr("autocomplete.attached", true); 
} 

これは私が理解できないことです：なぜあなたはdivを隠して表示したくないのですか？そして、「隠されたdivsで周囲を混乱させる」とはどういう意味ですか？

Answer 3

<input>はDOMからのみ削除することもできますが、を除き、はjQueryのremove()メソッドを使用して削除することができます。この関数はDOMから要素を削除しますが、アタッチされたイベントハンドラとデータも破棄します。

ただし、削除した後もDIVへの参照を忘れないようにしてください。このようなもの：

var theField = document.getElementById('contact-list'); 
// remove it only from DOM 
theField.parentNode.removeChild(theField); 

// ... 

// and later when you want to bring the field back into the game 
$('#contact-list-container').append(theField); 

N.B.これはIEでメモリリークを引き起こします。ページのアンロードにjQueryのremove（）関数を使用するか、フィールドを表示/非表示にすることができます。後者ははるかにクリーンな解決策であり、なぜそれが「messy」であるのかわかりません。