jQuery：即使元素已被刪除並重新創建，如何保留元素的功能？

Question

我有一個問題..我使用自動填充插件，我編輯爲使輸入文本消失時，用戶做出選擇。

所以，我的目標是，當用戶選擇從自動完成列表中的一行：

1. 一個Ajax請求將檢索選定行附加信息（這裏沒問題）
2. 表單自動與這些額外的信息fillup
3. 與自動完成的輸入文本消失，並在它的地方我把2個div，一個與X內（以'取消'previus選擇），另一個與一些短關於選擇本身的信息（這裏沒有問題）
4. 如果用戶點擊X div，所有的都必須作爲開始返回，輸入文本與自動完成。

什麼發生在我身上，就是在點4，一切工作正常，但與自動完成輸入文本由

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

重新自動完成不會再工作！

那麼，如何在重新創建時將自動完成功能加入到字段中？爲了讓用戶多次選擇和取消選擇它。

p.s：我知道我可以簡單地用輸入文本隱藏div，並用X顯示，但我寧願保持html標記最小化，不要混淆隱藏的div。 如果可能，我想改變每個選擇的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

我寫了一個函數，它將onFocus自動完成。所以，當你有你的輸入這樣的：

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

或者在你的情況下，聚焦狀態部件添加到您的輸入字段注入：

$("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

您也可以使用jQuery的remove()方法從DOM中刪除<input>，但刪除而不使用。該函數從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（）函數，也可以顯示和隱藏字段。後者是迄今爲止最乾淨的解決方案，我不明白爲什麼你會發現它「凌亂」。