php - 单击 Bootstrap 下拉元素并更改值

Question

这是 dropdwon

<div class="col-md-6">
             <div class="dropdown">
                <input  type="text" data-toggle="dropdown" id="search-input" class="form-control">
                <ul class="dropdown-menu" id="employee-list">
                  <!--filled by ajax -->
                </ul>
              </div>
        </div>

我用 a 获取列表，并尝试获取点击事件，但没有完成任何操作

$(document).ready( function(){
    $('#search-input').keyup(function(e){
        if($(this).val().length >= 3 /*&& e.which != 8*/ ){
            get_users($(this).val());
        }
    });

    $(".dropdown-menu li a").click(function(){
        alert('aaaa');
    });
});

我需要单击列表元素并使用单击元素的文本设置输入文本，但我无法处理单击事件

function get_users($text){
    $.ajax({
      url: "asociate_ci.php",
      method: 'get',
      data: {
        'text': $text ,
        'option':'get_users' 
      }
    })
      .done(function( response ) {
        var employees = JSON.parse(response);
        //console.dir(employees);
        $('#employee-list').empty();
        $.each(employees, function(){
            //console.log(this.last_name);
            $('#employee-list').append("<li ><a class='employee-li'>"+this.last_name+"</a></li>");
        });
        $('#search-input').focus();
      });
}

Answer 1

您需要对与选择器 .dropdown-menu 匹配的所有元素使用 on，并使用单个处理程序 a。这将能够绑定(bind)到动态创建的元素。

// $(".dropdown-menu") = watch for any changes to the dom inside this element
// 'click' = event type
// a = add click event to these elements
$('.dropdown-menu').on('click', 'a', function(){
    alert('aaaa');
});