javaScript onClick没有'当从另一个页面上的DIV内部加载的页面执行时，无法工作

javaScript onClick doesn't work when executed from page loaded inside a DIV on another page

本文关键字：执行 加载 内部 工作 DIV onClick 另一个 javaScript 没有      更新时间：2023-09-26

我有两个页面：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>

它正确执行该表导出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中加载时，是什么导致这个按钮正常工作？

我的控制台没有任何错误，我只是点击按钮，什么也没发生。

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

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

})；

听起来你没有在home.php上加载tableExport插件。动态加载的HTML中的<script>没有运行。如果你想让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");
    }
});
相关文章：