javascript - jQuery 下拉菜单选择不触发点击事件

Question

动态附加出现在下拉列表中的下拉 anchor 标记后，单击事件不会触发 - 似乎我需要在 .append 之后重新绑定(bind)单击处理程序，或者我需要将点击处理程序包装在函数中？

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
  $(function () {

    ajax_call("database");

    $body = $("body");

    $(document).on({
        ajaxStart: function() { $body.addClass("loading");    },
        ajaxStop: function() { $body.removeClass("loading"); }    
    });


    $(".dropdown-menu a").on("click", function () {
         var selText = $(this).text();
         ajax_call(selText);    
    });


    function ajax_call($aff){
    $.ajax({                                      
      url: 'fill_crosstab.php',                         
      data: {action:$aff},                                             
      dataType: 'json',                   
      success: function(data){
      $('#frame .table tbody').empty();
      if ($aff == "database") {
        $.each(data, function(key, val) {
            $('.dropdown-menu').append("<a class='dropdown-item' href='javascript:;'>" + val.Affiliation + "</a>");
        });
      } else {
        $.each(data, function(key, val) {
            $('#frame .table tbody').append("<tr><td>" + val.LAST + "</td><td>" + val.FIRST + "</td><td>" + val.MDC + "</td><td>" + val.RADIO + "</td><td>" + val.ePCR + "</td><td>" + val.Firehouse + "</td></tr>"); 
        });
      }
      }
      //dd_call(); 
    });
    };

});
</script>

html:

<div class="btn-group">
    <button type="button" class="btn btn-primary">Affiliations</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
<div class="dropdown-menu">

</div>
</div>

Answer 1

您正在尝试将单击事件绑定(bind)到尚不存在的元素。当 ajax 请求成功响应时，您应该绑定(bind)该事件。

function ajax_call($aff){
    $.ajax({                                      
      url: 'fill_crosstab.php',                         
      data: {action:$aff},                                             
      dataType: 'json',                   
      success: function(data){
        $('#frame .table tbody').empty();
        if ($aff == "database") {
          $.each(data, function(key, val) {
              $('.dropdown-menu').append("<a class='dropdown-item' href='javascript:;'>" + val.Affiliation + "</a>");
          });
          // Bind the event now, after the html element has bend created.
          $(".dropdown-menu a").on("click", function () {
            var selText = $(this).text();
            ajax_call(selText);
          });
        } else {
          $.each(data, function(key, val) {
            $('#frame .table tbody').append("<tr><td>" + val.LAST + "</td><td>" + val.FIRST + "</td><td>" + val.MDC + "</td><td>" + val.RADIO + "</td><td>" + val.ePCR + "</td><td>" + val.Firehouse + "</td></tr>"); 
          });
        }
      }
    });
 };