資料結構
網路
關係資料庫管理系統 (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
廣告