Jquery .on('click') strange behavior - selects all elements with same class name

Question

Im trying to add the text contained inside an <li> element when the user clicks on it to an input field #private_users . The problem is that if the list looks like this:

<ul>
<li class="user_li_selection">Jane</li>
<li class="user_li_selection">John</li>
<ul>

And then the user clicks on 'John', the string that gets puts into the input box looks like John, Jane, John . Then, after this first selection, the script behaves normally attaching only the selected names. Basically, it seems like the script is attaching the text contained in all of the li elements and then attaching the text of the one selected. I cant't figure why this is happening. It may be useful to note, that the <li> elements are being attached dynamically with a different script.

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

     });

The input field I am targeting is just a simple text input like this:

<input type="text" id="private_users" />

JS FIDDLE EXAMPLE: (MAKE SURE to SELECT THE INPUT FIELD before selecting an item from the list or the problem will not occur.)

Answer 1

You can get the text of the clicked li with e.target , like so:

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

Answer 2

Try this - 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();

});

Answer 3

The culprit is this line:

if ( !$('.user_li_selection').click() )

when the text box looses its focus, you simulate a click on all list elements.

I'm not sure what you are trying to do with this line, the if statement does not really make sense.