Question

我有一个问题..

我使用自动完成插件，我编辑用于使输入文本在用户做出选择时消失。

所以，我的目标是，当用户从自动完成列表中选择一行时：

Ajax请求将检索有关所选行的其他信息（此处没有问题）
带有这些附加信息的表单自动填写（在此处确定）
带有自动完成功能的输入文本消失了，在它的位置我放置了2个div，一个带有X内部（用于'取消选择'previus选项），另一个带有一些关于选择本身的简短信息（这里没有问题））
如果用户点击X div，则所有内容都必须作为开头返回，输入文字为自动完成。

发生在我身上的是，在第4点，一切正常，但是当通过

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

自动完成功能不再有用了！

那么，如何在重新创建时将自动完成功能加入到字段中？为了让用户多次选择和取消选择它。

ps：我知道我可以简单地用输入文本隐藏div并显示带有X的那个，但我更喜欢保持html标记最小化并且不要乱用隐藏的div。如果可能，我想在每次选择时更改innerHTML并重新关联自动完成功能。

这就是我现在的姿势：

$(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);"/>

或者在您的情况下，将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？你是什么意思“混乱隐藏的div”？

Answer 3

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

jQuery：即使元素被删除并重新创建，如何保持元素功能？

3 个答案: