jquery插件中动态创建的元素单击事件?
我正在尝试用jQuery制作一个自动完成插件。目前我做了以下工作: HTML:jquery插件中动态创建的元素单击事件?,jquery,plugins,click,Jquery,Plugins,Click,我正在尝试用jQuery制作一个自动完成插件。目前我做了以下工作: HTML: 从$this.on('change keyup',function(){中删除change 由于您在keyup上更新了建议,因此更改实际上并没有什么用处 当用户将输入留在建议上的单击时,此更改处理程序将首先触发并更改建议的元素(同样,是…) 在更改事件之后,但在更改创建新元素之前,单击事件仍然在旧的不再存在的元素上触发,而不是在新元素上触发 )() <div class="form-group"><
从
$this.on('change keyup',function(){
中删除change
由于您在keyup
上更新了建议,因此更改
实际上并没有什么用处
当用户将输入留在建议上的单击
时,此更改
处理程序将首先触发并更改建议的元素(同样,是…)
在更改
事件之后,但在更改
创建新元素之前,单击
事件仍然在旧的不再存在的元素上触发,而不是在新元素上触发
)()
<div class="form-group"><input type="text" class="input" value=""></div>
(function ( $ ) {
$.fn.searchPlugin = function( options ) {
return this.each(function() {
var $this = $(this), data = options.data, search = $this.val().toLowerCase(), result = [];
function get(arg) {
result = [];
for(var i=0; i<data.length; i++) {
if(data[i]['name'].toLowerCase().indexOf(arg)!=-1) {
result.push(data[i]);
}
/*
for(key in data[i]) {
if(data[i][key].indexOf(search)!=-1) {
results.push(data[i]);
}
}
*/
}
}
function getById(id) {
return result[id].name;
}
function set() {
if(!$this.next('.autocomplete').length) {
$this.after('<div class="autocomplete"></div>');
}else {
$this.next('.autocomplete').html('');
}
for(var i = 0; i < result.length; i++) {
$this.next('.autocomplete').append('<div class="autocomplete__item" data-id="' + i + '">' + result[i].name + '</div>');
}
}
$this.on('change keyup', function(){
get( $this.val().toLowerCase() );
set( result );
});
$this.on('blur', function(){
//$this.next('.autocomplete').html('');
});
$('.form-group').on('click', '.autocomplete__item', function(e){
alert( getById( $(this).data('id') ) );
$this.val( getById( $(this).data('id') ) );
$this.next('.autocomplete').html('');
});
});
};
}( jQuery ));
$(function(){
var data = [{'id': 1,'name': 'USA'},{'id': 2,'name': 'France'},{'id': 3,'name': 'Italy'}];
$('.input').searchPlugin({
data: data
});
});
$('.form-group').on('click', '.autocomplete__item', function(e){
alert( getById( $(this).data('id') ) );
$this.val( getById( $(this).data('id') ) );
$this.next('.autocomplete').html('');
});