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（）函数，也可以显示和隐藏字段。后者是迄今为止最干净的解决方案，我不明白为什么你会发现它“凌乱”。