javascript - Jquery .on ('click' )奇怪的行为 - 选择具有相同类名的所有元素

Question

我正在尝试添加 <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>元素正在使用不同的脚本动态附加。

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

JS FIDDLE EXAMPLE: (请确保在从列表中选择项目之前选择输入字段，否则不会出现问题。)

Answer 1

您可以使用e.target获取点击的li的文本，如下所示:

$(document).ready(function () {
  $(".user_li_selection").on('click', function (e) {
    e.preventDefault();
    var text = $(e.target).text();
    $("#private_users").val(text);
  });
});