Question

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

我的主页的主题部分有一个脚本：

＆＃13;

<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>

＆＃13;

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

＆＃13;

脚本： 1.成功地将一些内容（即jquery数据表插件和按钮）加载到我的div id＆＃39; my_ajax_container＆＃39;。

失败尝试将事件附加到点击的按钮
它成功加载了另一个使用ajax填充jquery数据表插件的脚本。

如果我删除脚本的第一行（即.load语句），而只是在html正文中使用PHP include语句包含user_landing / index.php文件，那么事件就会成功附加。

Answer 1

在绑定事件时，标识为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
  });

Answer 2

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

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

这实质上是在body标签上放置一个事件监视器，并说“每当点击#btn_new_case选择器时，运行该事件。”因此，无论您是在初始页面响应期间添加元素，还是在之后动态地向DOM添加元素，这都将起作用。

Answer 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");
    });
});

on click事件未被ajax动态加载的内容绑定

3 个答案: