Question

我正在使用有用的jquery-Autocomplete库。

我相信它更适合在jsfiddle上看到它：here

我在购物图表结构中有一个项目列表。还有一个按钮，用于在列表中添加新项目。每个项目都是一个使用jquery-Autocomplete的输入字段。但是，新添加的项目没有绑定到它们的函数autocomplete({...})。

HTML：

<div class="row-item">
    <input type='text' class='search-me'/>
</div>
<br/>
<br/>
<a href="#" id="add-search">+&nbsp;Add new</a>

JS：

$(function(){ 
    var countries = [
   { value: 'Andorra', data: 'AD' },
   { value: 'Zimbabwe', data: 'ZZ' },
   { value: 'Denmark', data: 'DK' }
    ];
    // <----------------------------- MAKE THIS BINDING PERMANENT at document level
    $('input.search-me').autocomplete({
        lookup:countries,   
        onSelect: function(suggestion){
            var msg=$('<span />',{class:'msg',text:suggestion.data+' selected'});
            $(this).after(msg);     
            $(msg).fadeOut(2000,function(){
                $(msg).remove();   
            });
        }
    });
    //--------------------------------------------- END
    $('a#add-search').on('click',function(){
        var itemrow=$('div.row-item:first').clone();
        $(itemrow).find('input').val('');
        $('div.row-item:last').after(itemrow);
    });
});

我希望在文档级别将函数autocomplete绑定到class=search-me的所有元素（实际或新生成的）。

与给定事件的函数绑定时类似：

$(document).on('click','#selectorid',myfunction)

Answer 1

IE支持不佳的解决方案：

$(document).on('DOMNodeInserted', function(e) {
    if (e.target.id == 'someID') {
       //element with #someID was inserted.
       // your autocomplete code here
    }
    if ($(e.target).is('.someClass')) {
       //element with class someClass was inserted.
       // your autocomplete code here
    }
});

Jquery，将函数绑定到选择器（动态添加）并且不涉及任何事件

1 个答案: