onclick事件不起作用鏈接

Question

我在我的數據表中啓用了服務器端處理。我使用下面的代碼爲我的數據表：

<script type="text/javascript"> 
$(document).ready(function() { 
    var table = $('#FullDataDisplay').DataTable({ 
    "processing": true, 
    "serverSide": true, 
    "ajax": "server_processing.php", 
    "aoColumnDefs": [    
{ 
    "aTargets": [ 2 ], // Column to target 
    "mRender": function (data, type, full) { 
    return '<a id=' + full[0] + ' class="edit-link" href="#" title="Edit">' + data + '</a>'; 
    } 
} 
] 
}); 
}); 
</script> 

這是正確返回傳遞給我的crud.js所需的鏈接腳本如下：

/* Get Edit ID */ 
    $(".edit-link").click(function() 
    { 
      var id = $(this).attr("id"); 
      var edit_id = id; 
      { 
        $(".content-loader").fadeOut('slow', function() 
        { 
          $(".content-loader").fadeIn('slow'); 
          $(".content-loader").load('edit_form.php?edit_id='+edit_id); 
          $("#btn-add").hide(); 
          $("#btn-view").show(); 
        }); 
      } 
      return false; 
    }); 
    /* Get Edit ID */ 

的問題是，當鏈接被點擊時，沒有任何反應。

Answer 1

因爲您加載內容動態地通過AJAX，您需要使用$(document)

/* Get Edit ID */ 
$(document).on('click',".edit-link",function() { 
    var id = $(this).attr("id"); 
    var edit_id = id; { 
     $(".content-loader").fadeOut('slow', function() { 
      $(".content-loader").fadeIn('slow'); 
      $(".content-loader").load('edit_form.php?edit_id=' + edit_id); 
      $("#btn-add").hide(); 
      $("#btn-view").show(); 
     }); 
    } 
    return false; 
}); 
/* Get Edit ID */