[英]Jquery .on('click') strange behavior - selects all elements with same class name
我试图在用户单击<li>
元素中包含的文本时将其添加到#private_users
输入字段中。 问题是,如果列表如下所示:
<ul>
<li class="user_li_selection">Jane</li>
<li class="user_li_selection">John</li>
<ul>
然后用户单击“ John”,将放入输入框中的字符串看起来像John, Jane, John
。 然后,在第一次选择之后,脚本的行为通常只是附加选定的名称。 基本上,脚本似乎附加了所有li元素中包含的文本,然后附加了所选li元素的文本。 我不知道为什么会这样。 可能需要注意的是, <li>
元素是通过不同的脚本动态附加的。
$(document).on('click', '.user_li_selection', function(e) {
e.preventDefault;
var selection = $(this).html();
var current_string = $('#private_users').val();
arr = current_string.split(','), i;
length = arr.length;
if (length != 1) {
arr[length-1] = ' '+selection+', ';
} else {
arr[length-1] = selection+', ';
}
$('#private_users').val(arr);
//$('.input_auto_complete').remove();
});
$('#private_users').keyup(function() {
var input = $(this).val();
arr = input.split(', '), i;
length = arr.length;
var current_input = arr[length-1];
var input_box = $('#private_users');
var position = input_box.position();
if ($('.input_auto_complete').length == 0 && input !== '') {
$('body').append('<div class="input_auto_complete"></div>');
}
if (input == '') {
$('.input_auto_complete').remove();
}
$('.input_auto_complete').css('top',position.top + 24);
$('.input_auto_complete').css('left',position.left);
$('.input_auto_complete').show();
$.post('/username-query', {
'user_input': current_input
}, function(data) {
$('.input_auto_complete').empty().append(data);
});
});
$('#private_users').blur(function () {
if ( !$('.user_li_selection').click() ) {
$('.input_auto_complete').remove();
}
});
我定位的输入字段只是一个简单的文本输入,如下所示:
<input type="text" id="private_users" />
您可以使用e.target
获取单击的li
的文本,如下所示:
$(document).ready(function () {
$(".user_li_selection").on('click', function (e) {
e.preventDefault();
var text = $(e.target).text();
$("#private_users").val(text);
});
});
试试这个-http://jsfiddle.net/5V6PP/
$(document).on('click', '.user_li_selection', function(e) {
e.preventDefault;
var selection = $(this).html();
var current_string = $('#private_users').val();
arr = current_string.split(',');
i = 0;
length = arr.length;
if (length != 1) {
arr[length-1] = ' ' + selection + ', ';
} else {
arr[length-1] = selection + ', ';
}
$('#private_users').val(arr);
//$('.input_auto_complete').remove();
});
罪魁祸首是这条线:
if ( !$('.user_li_selection').click() )
当文本框失去焦点时,您将模拟单击所有列表元素。
我不确定您要使用此行做什么,if语句真的没有意义。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.