jQuery點擊功能不起作用

Question

jQuery點擊功能無法正常工作。實際上，它的工作原理，但我在頁面加載後通過JavaScript調用加載我的HTML，在這種情況下jQuery點擊功能不起作用。

HTML部分：

<table class="table table-lg"> 
    <thead> 
     <tr> 
     <th width="5%" class="text-center">#</th> 
     <th width="30%" class="text-center"><?php echo lang('suggestion'); ?></th> 
     <th width="10%" class="text-center"><?php echo lang('category'); ?></th> 
     <th width="15%" class="text-center"><?php echo lang('proposer'); ?></th> 
     <th width="14%" class="text-center"><?php echo lang('date'); ?></th> 
     <th width="10%" class="text-center"><?php echo lang('likes'); ?></th> 
     <th width="16%" class="text-center"><?php echo lang('action'); ?></th> 
     </tr> 
    </thead> 
    <tbody id="get_sgs"> 

<!-- This part is loading by jQuery POST --> 
    </tbody> 
</table> 

的JavaScript：

<script type="text/javascript"> 
    window.onload = function() { 
     $.ajax({ 
      url: "<?php echo site_url('get/suggestions'); ?>", 
      success: function(data){ 
      $("#get_sgs").html(data); 
      } 
     }); 
    }; 
    $("#reload_suggestions").click(function() { 
     $.ajax({ 
      url: "<?php echo site_url('get/suggestions'); ?>", 
      success: function(data){ 
       $("#get_sgs").html(data); 
      } 
     }); 
    }); 
    $('.rate_up').click(function() { 
    var id = $(this).attr('data-id'); 
    console.log(id); 
    $.ajax({ 
    url: '<?php echo site_url('rate/up'); ?>' + '/' + id, 
    type: 'POST', 
    data: { 
     'submit': true, 
    }, 

    }); 
}); 
$('.rate_down').click(function() { 
    var id = $(this).attr('data-id'); 
    console.log(id); 
    $.ajax({ 
     url: '<?php echo site_url('rate/down'); ?>' + '/' + id, 
     type: 'POST', 
     data: { 
      'submit': true, 
     }, 

    }); 
}); 
</script> 

在此先感謝。

Answer 1

你有兩個選擇：

1. 綁定單擊處理$("#get_sgs").html(data);的success塊內後直接。
2. 綁定使用$("#get_sgs").on("click", ".rate_down", function() {

點擊處理程序的第二個選項的說明，請參見Event binding on dynamically created elements?。