Question

我在MVC 5 View中有一个表，它重复输出数据行。每行都有一个连接到它的按钮，点击它时会使用JQuery将data-id传递给隐藏的文本框

MVC查看

@foreach (var item Model.MyList) {

//<tr> etc
<td>
  <button class="btn btn-danger btn-xs" id="btnDelete" data-toggle="modal" data-target="#myModal" data-id="@item.ID"> Delete </button>
</td>

}

JQuery

$(document).ready(function () {

    //Everytime we press delete in the table row
    $('.btn.btn-danger').click(function () {

        //Update the text box with delete id so our model knows which one to delete

        $('#item-to-delete').val(id);

    });

});

然后我决定用https://datatables.net/取代我的桌子有几个原因。现在的问题是，当用户单击Datatable中的Delete按钮时，我的JQuery click函数不再被调用，因此删除ID不会传递到我的隐藏文本框中。

这是我的DataTable脚本

<script>
    $(document).ready(function () {
        $('#dataTables-example').dataTable({  
            "bServerSide": true,  
            "sAjaxSource": "/MyController/GetAjaxData",
            "bProcessing": true,
            "bJQueryUI": true,
            "aoColumns": [
                      { "sName": "ID", "visible": false },
                      null, //FullName
                      null, //Email
                      null, //LastLoginDate
                      {
                          "mData": null,
                          "mRender": function (data, type, full) {
                              return "<button class='btn btn-danger btn-xs' id='btnDelete' data-toggle='modal' data-target='#myModal' data-id='"+ full[0] +"'>Delete</button>";

                          }
                      }

            ]
        });  
    });  
</script>

任何人都可以看到为什么会发生这种情况或建议我如何解决问题？

非常感谢。

Answer 1

而不是$('.btn.btn-danger').click(function ()...

尝试使用.on将事件绑定到以后创建的dom元素。

很多人已经问过这个问题了。见jQuery function not binding to newly added dom elements

JQuery Datatable中的按钮不会调用JQuery函数

1 个答案: