0

<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 の例: (リストからアイテムを選択する前に、必ず入力フィールドを選択してください。そうしないと、問題は発生しません。)

4

3 に答える 3

2

次のように、クリックliしたテキストを で取得できます。e.target

$(document).ready(function () {
  $(".user_li_selection").on('click', function (e) {
    e.preventDefault();
    var text = $(e.target).text();
    $("#private_users").val(text);
  });
});
于 2012-06-21T17:23:40.457 に答える
1

犯人はこの行です：

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

テキスト ボックスがフォーカスを失うと、すべてのリスト要素のクリックをシミュレートします。

この行で何をしようとしているのかわかりません。if ステートメントは本当に意味がありません。

于 2012-06-21T18:40:38.637 に答える
1

これを試してください - 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();

});
于 2012-06-21T17:23:25.370 に答える