Onclick更改不适用于数据表

Question

我有用datatables库呈现的表。我正在向表中传递链接，如下所示：

<button class="pushme2 with-color" type="button" onClick="upClick()">add to brief</button>

单击此按钮将更改并增加一个计数器。这可以按预期工作，但不能在表中使用（它只会增加我的计数器，不会更改onclick事件或文本）。

用于更新按钮的脚本如下：

<script>

$(document).ready(function(){

$(".with-color").click(function () {
   if($(this).hasClass("btn-warning"))
   {
        $(this).addClass("btn-danger");
        $(this).removeClass("btn-warning");
        $(this).attr("onclick","upClick()");
   }
   else{
        $(this).addClass("btn-warning");
        $(this).removeClass("btn-danger");
        $(this).attr("onclick","onClick()");
   }
});

$(".pushme2").click(function(){
    $(this).text(function(i, v){
       return v === 'remove from brief' ? 'add to brief' : 'remove from 
brief'
        });
    });
});
</script>

<script type="text/javascript">
 var clicks = {{ session[landing_page[0]] | length}};
function upClick() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
};

function onClick() {
    clicks += -1;
    document.getElementById("clicks").innerHTML = clicks;
};
</script>

我的数据表代码如下：

            <table id="landing_pages" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Keyword</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Keyword</th>
                </tr>
            </tfoot>
        </table>

        <script>$(document).ready(function() {
        $('#landing_pages').DataTable( {
            dom: 'Blfrtip',
            keys: true,
            deferRender: true,
            "order": [[ 1, "desc" ]],
            responsive: true,
            "searching": true,
            fixedHeader: true,
            stateSave: true,
            select: false,
            "lengthMenu": [[10, 25, 50, 500, 1000, 2500, 5000], [10, 25, 50, 500, 1000, 2500, 5000]],
            buttons: [
                { extend: 'copy', className: '', },
                { extend: 'csv', className: '' },
                { extend: 'excel', className: '' },
                { extend: 'pdf', className: '' },
                { extend: 'print', className: '' },
                { extend: 'colvis', className: '' }
            ],
            "processing": true,
            "serverSide": true,
            "ajax":"/data-source/keywords/"

        } );
    } );</script>

为什么在我的数据表中呈现时它不起作用？