jQuery dropdown selected not firing click event

Question

After dynamically appending dropdown anchor tags that appear in the drop down, click event doesn't fire - seems like I need to re-bind the click handler after the .append or do I need to wrap the click handler in a function?

<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

You're trying to bind a click event to an element that does not yet exist. You should bind that event when you're ajax request has successfully responded.

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

Should be like this:

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

Put the dynamic element as second param, see more detail here.