点击事件未绑定由 ajax 动态加载的内容答案

【问题标题】：on click event not being bound for content that is dynamically loaded by ajax点击事件未绑定由 ajax 动态加载的内容
【发布时间】：2015-08-13 04:03:17
【问题描述】：

这是我第一次使用 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 包含语句简单地包含 user_landing/index.php 文件，则事件附加成功。

请告诉我哪里出错了。非常感谢

【问题讨论】：

如果答案是正确的，你应该这样标记它。

标签： jquery html ajax

【解决方案1】：

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

更新您的代码

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

到

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

【讨论】：

【解决方案2】：

我通常将事件绑定到 body 标记，因为在初始请求之后它不太可能不存在 :)

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

这实际上是在 body 标记上放置一个事件观察器，并显示“只要单击 #btn_new_case 选择器，就运行该事件。”因此，无论您是在初始页面响应期间添加元素，还是在之后动态地将元素添加到 DOM 中，这都会起作用。

【讨论】：

【解决方案3】：

页面加载时，#div_new_case 还不存在。因此，替换：

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

与：

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

或者将您的代码更改为：

$(function() {
    $('#my_ajax_container').load('./user_landing/index.php', function() {;
        $("#btn_new_case").on("click", function() { 
            alert ("hi");// code
        });
        //since this script also needs the content just loaded
        //this may be the best place to load it although it may 
        //work in it's current location
        $.getScript("js/my_data_table/my_data_table.js");
    });
});

【讨论】：