jQuery单击功能不起作用

Question

jQuery单击功能无法正常工作。 确实可以，但是我要在页面加载后通过JavaScript调用加载HTML，在这种情况下jQuery click函数无法正常工作。

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() {

请参阅对动态创建的元素进行事件绑定？ 有关第二个选项的说明。