jQuery dropdown selected not firing click event

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>

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

Related Articles