javascript - 包含到页面后使用 Javascript 命令

Question

我有一个包含三个表(表 A、表 B、表 C)的页面，我想根据用户单击的按钮来显示这些表。我可以使用以下脚本很好地做到这一点:

var tableA = document.getElementById("tableA");
var tableB = document.getElementById("tableB");
var tableC = document.getElementById("tableC");

var btnTabA = document.getElementById("showTableA");
var btnTabB = document.getElementById("showTableB");
var btnTabC = document.getElementById("showTableC");

btnTabA.onclick = function () {
    tableA.style.display = "table";
    tableB.style.display = "none";
    tableC.style.display = "none"; }

btnTabB.onclick = function () {
    tableA.style.display = "none";
    tableB.style.display = "table";
    tableC.style.display = "none"; }

btnTabC.onclick = function () {
    tableA.style.display = "none";
    tableB.style.display = "none";
    tableC.style.display = "table"; }

但是，我还想将这些表的 html 代码包含到此页面中。我还可以使用以下脚本来执行此操作:

$(function(){   $("#include-tables").load("P1/1_0/table.html"); });

也就是说我无法让它们一起工作。例如，当我将所有这些结合起来时(请参阅下面的示例代码)，我的表格被包含在内，但按钮不再起作用。如果我检查浏览器中的错误日志，它会显示 Null is not a object，因此我认为问题是由于所有变量和 Id 在按钮代码执行之前定义的。也就是说，由于我对 javascript 的了解(非常)有限，我无法弄清楚如何解决这个问题。

$(function(){
	$("#include-tables").load("/1_0/tables.html");
});

var tableA = document.getElementById("tableA");
var tableB = document.getElementById("tableB");
var tableC = document.getElementById("tableC");

var btnTabA = document.getElementById("showTableA");
var btnTabB = document.getElementById("showTableB");
var btnTabC = document.getElementById("showTableC");

btnTabA.onclick = function () {
    tableA.style.display = "table";
    tableB.style.display = "none";
    tableC.style.display = "none";
}
btnTabB.onclick = function () {
    tableA.style.display = "none";
    tableB.style.display = "table";
    tableC.style.display = "none";
}
btnTabC.onclick = function () {
    tableA.style.display = "none";
    tableB.style.display = "none";
    tableC.style.display = "table";
}

#tableA {
}

#tableB {
    display: none;
}

#tableC {
    display: none;
}

<div id="include-tables"></div>
	
<div class="button-div">
	<input type="button" id="showTableA" value="TableA">
	<input type="button" id="showTableB" value="TableB">
	<input type="button" id="showTableC" value="TableC">
</div>

<script src="script.js"></script>

Answer 1

.load() 是异步的，因此在完成之前您无法访问元素。将所有代码放入其回调函数中。

$(function(){
    $("#include-tables").load("/1_0/tables.html", function() {
        var tableA = document.getElementById("tableA");
        var tableB = document.getElementById("tableB");
        var tableC = document.getElementById("tableC");

        var btnTabA = document.getElementById("showTableA");
        var btnTabB = document.getElementById("showTableB");
        var btnTabC = document.getElementById("showTableC");

        btnTabA.onclick = function () {
            tableA.style.display = "table";
            tableB.style.display = "none";
            tableC.style.display = "none";
        }
        btnTabB.onclick = function () {
            tableA.style.display = "none";
            tableB.style.display = "table";
            tableC.style.display = "none";
        }
        btnTabC.onclick = function () {
            tableA.style.display = "none";
            tableB.style.display = "none";
            tableC.style.display = "table";
        }
    });
});

或者您可以使用事件委托(delegate)将事件处理程序绑定(bind)到动态添加的元素。请参阅Event binding on dynamically created elements?