jQuery dropdown selected not firing click event

在動態添加出現在下拉列表中的下拉定位標記後，點擊事件不會觸發 - 好像我需要在.append之後重新綁定點擊處理程序，或者是否需要打包函數中的點擊處理程序？jQuery dropdown selected not firing click event

<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>

來源

2017-02-24 BarclayVision

您正嘗試將點擊事件綁定到尚不存在的元素。當您的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>"); 
      }); 
     } 
     } 
    }); 
};

來源

2017-02-24 01:41:20 Josh

謝謝 - 我知道這是一個有約束力的問題，只是無法弄清楚。 – BarclayVision

如果這有幫助，你會投票答覆請。 – Josh

應該是這樣的：

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

把動態元素作爲第二PARAM，看到更多的細節here。

來源

2017-02-24 01:41:01

jQuery dropdown selected not firing click event

回答

相關問題