jQueryドロップダウンが選択されていないクリックイベントを選択した

Question

ドロップダウンメニューに表示されるドロップダウンアンカータグを動的に追加した後、クリックイベントが発生しない - .appendの後にクリックハンドラを再バインドする必要があるか、関数内のクリックハンドラ？

<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

まだ存在しない要素にクリックイベントをバインドしようとしています。 ajaxリクエストが正常に応答したときにそのイベントをバインドする必要があります。

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>"); 
      }); 
     } 
     } 
    }); 
}; 

Answer 2

は、このようにする必要があります：

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

第二のparamなどの動的な要素を入れて、より詳細hereを参照してください。