javascript - 选择已使用 Jquery 的 .load 加载到页面上的元素-6ren

javascript - 选择已使用 Jquery 的 .load 加载到页面上的元素

转载作者：行者123 更新时间：2023-11-30 12:18:59

我有两个 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 找到新按钮，只会在页面准备就绪时提醒页面。

谁能解释这是为什么，我该如何解决？我查看了其他问题，但没有找到适合我解决此问题的答案。

最佳答案

用 .load() 的 complete 回调注册点击事件处理程序

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

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

关于javascript - 选择已使用 Jquery 的 .load 加载到页面上的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31626105/

文章推荐： ios - TableView 未知阴影错误

文章推荐： c# - 在 C# 中移动文件之前等待获得文件的独占访问权限

文章推荐： swift - 基于对多引用对项目进行排序

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 选择已使用 Jquery 的 .load 加载到页面上的元素