数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在动态加载的HTML中让JQuery感知ID元素？
本文将介绍如何使JQuery感知动态加载的HTML中的ID元素。
通常，如果我们想将某个元素绑定到任何事件，可以使用on()方法直接绑定到每个元素的任何事件。让我们深入了解文章以获得更好的理解。
jQuery on() 方法
内置方法jQuery on()用于向选定的元素及其在DOM树中的后代元素添加一个或多个事件处理程序。DOM（文档对象模型）是万维网联盟标准。此方法解释了如何访问DOM树中的项目。
语法
以下是JQuery on()方法的语法
$(selector).on(event, childSelector, data, function)
示例
在下面的示例中，我们使用JQuery的on()方法运行脚本。这将在点击文本时创建一个新的段落。
<!DOCTYPE html>
<html>
<body style="background-color:#D1F2EB">
<style>
li {
font-size: 30px;
width: 400px;
padding: 20px;
color: #A569BD;
}
</style>
<ol id="list">
<li>Welcome, Click To Know More</li>
</ol>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#list").on("click",
"li", function (event) {
$('#list').append(
'<li>Tutorialspoing..!The Best E-way Learning</li>');
$('#list').append(
'<li>Where You Can Find A Lot Of Courses</li>');
});
});
</script>
</body>
</html>
当脚本执行时，它将生成一个包含文本以及网页上应用的CSS的输出。当用户点击文本时，会触发一个事件，该事件会将额外的段落添加到网页上的给定文本。
使用delegate()函数
jQuery中的delegate()方法用于指定一个函数，该函数将在每次发生事件时执行，并向选定元素的子元素添加一个或多个事件处理程序。
语法
以下是delegate()函数的语法：
$(selector).delegate( childSelector, event, data, function )
示例
考虑以下示例，我们使用delegate()函数，在点击文本时向父文本添加额外的段落。
<!DOCTYPE html>
<html>
<body style="background-color:#CCCCFF">
<style>
li {
font-size: 30px;
width: 400px;
padding: 20px;
color: #DE3163;
}
</style>
<ul id="list">
<li>Making Maagi</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#list").delegate("li", "click", function(event) {
$('#list').append(' < li > Boil Water < /li>');
$('#list').append(' < li > Add Masala < /li>');
$('#list').append(' < li > Add Broken Maggi Pieces < /li>');
$('#list').append(' < li > Leave For 3 - 4 MInutes < /li>');
});
});
</script>
</body>
</html>
运行上述脚本后，将弹出输出窗口，显示网页上的文本以及应用的CSS。当用户点击文本时，将触发事件，并将段落添加到父文本。
更新于：2023年4月20日
浏览量：709
广告