Question

我有两个html文件和一个使用Jquery 2.1.4的javascript文件。 js在file1.html上运行：

的file1.html

<html>
    <body id="body">
        <p>Some random text</p>
    </body>
</html>

file2.html

        <button id="btnNewButton">Test</button>

javascript文件

$(document).ready(function () {
    $('<div id="containerName"></div>').appendTo("#body");
    $('#containerName').load("file2.html");
});

这个可视化工作文件，file2中的按钮被添加到file1，但是如果我尝试添加一个事件监听器：

$(document).ready(function () {
    $('<div id="containerName"></div>').appendTo("#body");
    $('#containerName').load("file2.html");

    $("#btnNewButton").click(alert("test1"));
});

似乎javascript无法通过该ID找到新按钮，只是在页面准备就绪时向页面发出警报。

任何人都可以阐明为什么会这样，以及我如何解决它？我已经查看了其他问题而没有找到解决这个问题的答案。

Answer 1

使用.load()

的complete回调注册点击事件处理程序

.load( url [, data ] [, complete ] )
的网址
类型：字符串
包含发送请求的URL的字符串的数据
键入：PlainObject或String
与请求一起发送到服务器的普通对象或字符串的完整
类型：Function（String responseText，String textStatus，jqXHR jqXHR）请求完成时执行的回调函数。

$('#containerName').load("file2.html", function() { $("#btnNewButton").on("click", function() { alert("test1"); }); });

Answer 2

你必须在file2.html成功加载后初始化事件（给回调参数2的load（）

$(document).ready(function () {
    $('<div id="containerName"></div>').appendTo("#body");

 $('#containerName').load( "file2.html", function() {
  alert( "Load was performed." );
    $("#btnNewButton").click(alert("test1"));
});

});

Answer 3

这也有效：

$(document).ready(function () {
     $('<div id="containerName"></div>').appendTo("#body");
     $('#containerName').load("file2.html");
     $(document).on("click","#btnNewButton",function() { 
                                                alert("test1");
                                            });
});

对于早期版本的jquery（在jquery 1.7之前）而不是.on（），.live（）用于为动态添加的元素创建事件侦听器。

像这样：

$("#btnNewButton").live("click",function(){alert("test1");});

使用Jquery的.load

3 个答案: