单击按钮时在数据表上绑定表答案

【问题标题】：bind tables on datatables when click button单击按钮时在数据表上绑定表
【发布时间】：2015-06-23 04:59:10
【问题描述】：

请帮助我，当用户单击按钮时，我想在数据表上绑定表，但编码不起作用。我的代码如下所示：

<script src="jquery.js"></script>
<link href="css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').dataTable({
    "ajax": 'data.json',
    "paging":   false,
    "searching": false,
    "order": [[ 0, "asc" ]]
});
var t = $('#example').DataTable();
$('#addRow').on( 'click', function () {
    t.row.add([
        "1",
        "2",
        "3",
    ]).draw();
});
$("#button").click(function(e){
    $(".wrapper").html('<div><div id="addRow">add</div><table id="example" class="row-border hover" cellspacing="0" width="100%"><thead><tr><th align="left">title 1</th><th align="left">title 2</th><th align="left">title 3</th></tr></thead></table></div>');
});
});
</script>
<body>
<div class="wrapper"></div>
<div class="button"><input name="tbSubmit" type="button" value="click this button" id="button"></div>

我的 data.json 如下所示：

{
    "data": [
        [
            "1.1",
            "1.2",
            "1.3"
        ],
        [
            "2.1",
            "2.2",
            "2.3"
        ],
        [
            "3.1",
            "3.2",
            "3.3"
        ]
    ]
}

如果此代码不在 html click 中而是在类包装器中，则代码将运行，如下所示：

$("#button").click(function(e){
    $(".wrapper").html('');
});

<div class="wrapper"><div><div id="addRow">add</div><table id="example" class="row-border hover" cellspacing="0" width="100%"><thead><tr><th align="left">title 1</th><th align="left">title 2</th><th align="left">title 3</th></tr></thead></table></div></div>

感谢您的帮助:)

【问题讨论】：

标签： jquery html onclick datatables

【解决方案1】：

您正试图在事件存在之前将其绑定到#addRow。只有在您点击#button 后，它才会被添加到.wrapper。

要使事件绑定起作用，#addRow 需要已经在 DOM 上。或者...您可以绑定到一个祖先作为侦听器，如下所示：

$('.wrapper').on('click', '#addRow', function() { /*etc*/ });

【讨论】：

【解决方案2】：

它解决了，我只是像这样改变位置：

$(".wrapper").html('<div><div id="addRow">add</div><table id="example" class="row-border hover" cellspacing="0" width="100%"><thead><tr><th align="left">title 1</th><th align="left">title 2</th><th align="left">title 3</th></tr></thead></table></div>');
        var table = $('#example').dataTable({
            "ajax": 'data.json',
            "paging":   false,
            "searching": false,
            "order": [[ 0, "asc" ]]
        });
        var t = $('#example').DataTable();
        $('#addRow').on( 'click', function () {
            t.row.add([
                "1",
                "2",
                "3",
            ]).draw();
        });

【讨论】：

这似乎完成了与原始问题略有不同的工作，但它仍然考虑到我的回答（该元素不在 DOM 中）。您可能忽略的一种做法是在 DOM 中隐藏您想要但不可见的 HTML 元素。点击后，您可以显示它们而不是注入它们。
是的，格雷格，我在点击之前输入代码是错误的 :) 谢谢你的帮助 :)