2. 程式人生 > >jQuery on() 方法—向未建立的元素新增事件處理程式

jQuery on() 方法—向未建立的元素新增事件處理程式

阿新 • • 發佈：2019-01-18

向未來的元素新增事件處理程式（演示 on() 方法也適用於尚未建立的元素）

<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button"
 
).click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});
</script>
</head>
<body>

<div style="background-color:yellow">
<p>This is a paragraph.</p>
<p>Click any p element to make it disappear. Including this one.</p
 
>
<button>Insert a new p element after this button</button>
</div>

</body>
</html>

--------

相關推薦

jQuery on() 方法—向未建立的元素新增事件處理程式

向未來的元素新增事件處理程式（演示 on() 方法也適用於尚未建立的元素） <!DOCTYPE html> <html> <head> <scri

jquery on方法 繫結動態元素 出現的問題

                之前使用 on 的時候一直是$("").on('click','function(){}')之後發現有些時候一直無法繫結（比如元素動態生成時），檢視文件後發現正確用法應該是$(document).on("change","#pageSize_out",function(){  

Canvas 內部元素新增事件處理

前言 canvas 沒有提供為其內部元素新增事件監聽的方法，因此如果要使 canvas 內的元素能夠響應事件，需要自己動手實現。實現方法也很簡單，首先獲得滑鼠在 canvas 上的座標，計算當前座標在哪些元素內部，然後對元素進行相應的操作。配合自定義事件，我們就可以實現為 canvas 內的元素

【HTML5】Canvas 內部元素新增事件處理

前言 canvas 沒有提供為其內部元素新增事件監聽的方法，因此如果要使 canvas 內的元素能夠響應事件，需要自己動手實現。實現方法也很簡單，首先獲得滑鼠在 canvas 上的座標，計算當前座標在哪些元素內部，然後對元素進行相應的操作。配合自定義事件，我們

Js事件詳解（1）事件型別及幾種新增事件處理程式的方法

js中的事件 早期的事件流的兩種解決方案： 1.IE：事件冒泡流 即事件開始時由最具體的元素（DOM中層次最深的那個節點）接收，然後逐級向上傳播到較為不具體的節點（文件）–自下向上。 所有現代的瀏覽器都支援事件冒泡。 2.Netscape Co

開發過程中用Zepto/jquery給未來元素新增事件，live()無法使用解決方法

 通過 live() 方法附加的事件處理程式適用於匹配選擇器的當前及未來的元素（比如由指令碼建立的新元素）。 live() 方法為被選元素附加一個或多個事件處理程式，並規定當這些事件發生時執行的函式。 $("button").live("click",function(){ $

jQuery on() 方法 為選定已存在元素和未來元素繫結標準事件和自定義事件

很有必要說說jQuery的on方法，這個方法存在大乾坤大奧祕，主要注意兩點： 1、為已存在元素和未來元素（動態新增元素）繫結處理函式。 2、自定義一個非標準的事件並繫結處理函式。 定義和用法 on() 方法在被選元素及子元素上新增一個或多個事件處理程式。 自 jQuery 版本 1.7 起，on()

jQuery on()方法給動態生成的元素繫結方法

bind() 　　$("p").bind("click",function(){ 　　　　alert("The paragraph was clicked."); 　　}); 　　$("p").on("click",function(){ 　　　　alert("The paragraph was clic

Jquery on方法綁定事件後執行多次

cnblogs clas cli func jquery on col log () fun $("#btnOktcHc").on("click", function () {}); $("#btnOktcHc").off("click"); on 對同一個元素

jQuery on()方法

tip rom function inpu child ack += toggle mar 原文鏈接：http://caibaojian.com/jquery-on.html jQuery on()方法是jQuery官方推薦的一個函數，替換live、bind、delega

javascript事件委託理解，jQuery on 方法一步到位實現事件委託

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

jquery validate 對動態表單元素新增校驗

形如有如下表單元素： .... <input type="text" ....> <input type="text" ....> <input type="text" ....> <input type="text" ....&g

jQuery on() 方法詳解（二）

The event handler and its environment（事件處理程式和它的環境） handler引數必須是一個函式（或false值，見下文）， 除非你傳遞一個物件給events引數。 您可以提供一個匿名處理函式給.on()呼叫，就像上

jQuery給動態生成的元素新增事件

有時需要向頁面內動態新增元素，其中可能還需要給這些追加的元素繫結事件，這時候採用jquery是很方便的。 1、採用live()方法（該方法於1.7版本後廢棄）： live()方法可以給所有元素附加一個事件處理函式，甚至包含動態新增的元素，其採用事件委託的處理

Jquery on方法繫結事件後執行多次

這兩天工作中遇到使用js動態載入內容，同時需要對加入的內容繫結點選事件的，當時想想了想可以使用內聯的onclick 來實現，後來沒有這樣做，使用的是 on(‘click’,function(){}) ,然而使用on方法的時候就發現，on 對同一個元素多次繫結同一

【jQuery】為動態生成的元素新增時間監聽

一、 $. live () 方法          根據jQuery的官方描述，live方法在1.7中已經不建議使用，在1.9中刪除了這個方法。並建議在以後的程式碼中使用on方法來替代。 返回值:j

jquery on()方法 off()方法

自從jquery1.7以來，on事件新增到這個版本，使得事件的繫結變的十分簡單，用過jquery的人都說好，相信對off，on方法愛不釋手。下面是我總結出來的on,off的使用語法，希望對小夥伴有幫助。 on() 使用場景最多 最簡單的寫法 $("ul

jQuery使用on()繫結動態生成元素的事件無效的問題

jQuery的on()方法可以繫結動態生成元素的事件，但是在實際使用時發現無效。如下HTML： 1 2 3 <p> <a>123</a> </p> 使用如下方式，對靜態元素有效，但是繫結動態

javascript事件委託理解，jQuery .on()方法一步到位實現事件委託

本篇文章借鑑自：部落格園文章，只為自己鞏固下事件委託方面的知識 概述: 什麼叫事件委託？他還有一個名字叫做事件代理，（時間代理 === 事件委託，現在才知道這兩個是一個意思） 高程3上講：事件委託即是利用事件冒泡，只指定一個事件處理程式，就可以管理某

如何新增HTML元素的事件處理，有幾種方法

新增html元素的事件有三種方法。 1.通過HTML元素屬性。簡單說來就是在html結構中，給你要新增事件的元素新增一個屬性。 屬性名為 ‘on’ + 事件名。 如:你要給a元素繫結一個click事件，你就該這麼寫： name 2.通過物件屬性。 物