在Jquery DataTable中添加Click函数到两个按钮

Sum*_*rai 7 javascript ajax jquery datatables

我有一个jquery数据表,动态添加按钮进行编辑和删除,如下所示:

这是我的数据表.

以下是我的JS:

 ajaxLoadSuccess: function (data) {
     var datatableVariable = $('#articleTable').DataTable({ 
         data: data,
         columns: [
             { 'data': 'Topic' },
             { 'data': 'SubTopic' },
             { 'data': 'Title' },
             //{ 'data': 'ParsedText' },
             {
                 'data': 'AddedOn', 'render': function (date) {
                      var date = new Date(parseInt(date.substr(6)));
                      var month = date.getMonth() + 1;
                      return date.getDate() + "/" + month + "/" + date.getFullYear();
                 }
             },
             { 'data': 'AddedBy' },
             {
                'data': 'Action', 'render': function (data, type, row, meta) {
                 return '<input id="btnEdit" type="button" value="Edit" class="sfBtn sfPrimaryBtn sfLocale" /> <input id="btnDelete" type="button" value="Delete" class="sfBtn sfPrimaryBtn sfLocale" />';
                 }
             }]
        });
Run Code Online (Sandbox Code Playgroud)

以下是我点击按钮的代码:

$("#articleTable tbody").on("click", "tr", function () {
    alert($(this).text());
});
Run Code Online (Sandbox Code Playgroud)

当我单击编辑或删除按钮时,上面的函数被触发,我想要的是为删除按钮添加另一个函数,以便在单击编辑和删除时触发单独的函数.我该怎么做呢?

Kir*_*ahi 5

在此代码中,您已将点击事件触发到 tr。您可以将点击事件触发到特定 id,而不是触发事件到 tr。在这里你有#btnEdit#btnDelete

所以你的代码看起来像

$(document).on('click', '#btnEdit', function () {
    // Do something on edit
});

$(document).on('click', '#btnDelete', function () {
    // Do something on delete
});
Run Code Online (Sandbox Code Playgroud)

  • 这将始终触发对第一行的点击,因为按 id 选择将针对具有该 id 的 DOM 中的第一个元素。 (2认同)