jquery - 单击事件未绑定(bind)到由 ajax 动态加载的内容

Question

这是我第一次使用 Stackflow，所以如果您需要任何进一步的信息，请告诉我。我看过类似的问题，但找不到解决方案。

我的主页的头部有一个脚本:

<script>
  $(function() 
    {
  $('#my_ajax_container').load('./user_landing/index.php');

  $("#div_new_case").on("click", "#btn_new_case", function() { 
    alert ("hi");// code
  });

  $.getScript("js/my_data_table/my_data_table.js");
});
</script>

<div id="div_new_case" style="margin-top: 20px;">
  <button id="btn_new_case">New Case</button>
</div>

脚本:1. 成功将一些内容(即 jquery 数据表插件和按钮)加载到我的 div id 'my_ajax_container' 中。

它失败尝试将事件附加到被单击的按钮

它成功加载了另一个使用 ajax 填充 jquery 数据表插件的脚本。

如果我删除脚本的第一行(即 .load 语句)，而是简单地使用 html 正文中的 PHP include 语句包含 user_landing/index.php 文件，则事件将成功附加。

你能告诉我哪里出了问题吗？非常感谢

Answer 1

在绑定(bind)事件时，id 为 div_new_case 的元素也不存在。因此，您需要将事件绑定(bind)到绑定(bind)时可用的父级。因此，您需要从

更新您的代码

$("#div_new_case").on("click", "#btn_new_case", function() { 
    alert ("hi");// code
  });

至

$("#my_ajax_container").on("click", "#btn_new_case", function() { 
    alert ("hi");// code
  });