Question

我有两个页面：home.php和metrics.php

如果我直接加载metrics.php，并点击与此代码关联的按钮：

<button class="btn btn-warning btn-sm dropdown-toggle" onClick ="$('#box-table-a').tableExport({type:'excel',escape:'false'});"> <img src='img/xls.png' width='24px'>Export Table Data</button>

它正确执行此tableExport javascript文件并为我导出文件。

但是，我没有将metrics.php直接加载到地址栏中。我在main.php上使用了一个下拉列表：

<select class="navbar-inverse" placeholder="Report" onchange="showPage(this.value)">
  <option value="/main.php">Report</option>
  <option value="/metrics.php">Metrics</option>
</select>

然后通过此javaScript函数将metrics.php填充到此main.php页面上的DIV中：

function showPage(str) {
  if (str !==".PM") {
    if (str=="") {
      document.getElementById("txtHint").innerHTML="";
      return;
    } 
  }
  $("#txtHint").load((str));
}
</script>

问题：

当我直接加载metrics.php时，具体是什么导致此按钮正常工作，而不是当它在main.php上的DIV中加载时？

我的控制台中没有任何错误，我只需点击按钮就没有任何反应。

Answer 1

我认为问题是在通过ajax加载子页面之前绑定了事件onclick，因此新HTML节点在创建时不受约束。您可以使用jquery's live函数绑定onclick。类似的东西：

$(document).ready(function(){
  $("#your_node").live("click","your function here");

}）;

Answer 2

听起来你没有在home.php上加载tableExport插件。不运行<script>内部动态加载的HTML。如果你想让jQuery和tableExport插件在home.php上工作，你必须将它们包含在那里，或者解析metrics.php的内容并手动eval()所有的JavaScript。

<强> 更新
刚想到这个解决方案：

$("#txtHint").load(str, function () {
    // check whether tableExport plugin is loaded
    if (typeof $.tableExport !== "function") {
        $.getScript("/path-to/tableExport.js");
    }
});

从另一个页面上的DIV内部加载的页面执行时，javaScript onClick不起作用

问题：

2 个答案: