jQuery動態新增的元素繫結事件

阿新 • • 發佈：2018-12-21

今天在做專案是時候發現動態新增的元素不能繫結事件，由於本人js和jquery技術有限，所以也不知道原因，一查才知道，動態新增的元素繫結事件就會失效，所以修改了一下。

jquery中繫結事件一般使用bind，或者click，但是這隻能是對已經載入好的元素定義事件，那些後來新增插入的元素則需要另行繫結。在1.7版本以前使用live。但是在1.8版本以後推薦使用on。
 **定義和用法**  on() 方法在被選元素及子元素上新增一個或多個事件處理程式。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 程式碼庫。 


注意：使用 on() 方法新增的事件處理程式適用於當前及未來的元素（比如由指令碼建立的新元素）。

提示：如需移除事件處理程式，請使用 off() 方法。

提示：如需新增只執行一次的事件然後移除，請使用 one() 方法。

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/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 html 動態新增元素繫結事件

由於實際的需要，有時需要往網頁中動態的插入HTML內容，並在插入的節點中繫結事件處理函式。我們知道，用Javascript向HTML文件中插入內容，有兩種方法，一種是在寫HTML程式碼寫入JS，然後插入到文件中；另外一種是通過ajax的方式，從伺服器獲取資料，然

jQuery給一個元素繫結事件前，一次點選會多次觸發的問題所在

如果在給一個元素繫結事件後，再次繫結事件就會出現多次繫結的情況，此時就會出現多次觸發，解決方法我採用的是，在繫結事件前進行解綁，bind繫結的時間用ubbind解綁，其他繫結方法用對應的解綁方法解綁。

給動態動態生成元素繫結事件不生效解決方法

JQ動態生成的元素，無法繫結事件，查詢到的原因是：繫結事件的元素必須是構造頁面時已經存在的，假如構造元素是不存在，是後動態生成，則繫結不了，解決方法，通過on()繫結舉例:$("body").on("c

jQuery動態新增的元素繫結事件

今天在做專案是時候發現動態新增的元素不能繫結事件，由於本人js和jquery技術有限，所以也不知道原因，一查才知道，動態新增的元素繫結事件就會失效，所以修改了一下。 jquery中繫結事件一般使用bind，或者click，但是這隻能是對已經載入好的元素定義事件，那些後來新增插入

jQuery-為動態新增的元素繫結事件(以及不重複新增新的內容)

在使用jQuery的方式為元素繫結事件時，我經常使用bind或者click,但這隻能為頁面已經載入好的元素繫結事件。像需要用ajax的方式請求遠端資料來動態新增頁面元素時，顯然以上幾種繫結事件的方式是無效的 $(selector).bind(event,d

jquery html動態新增的元素繫結事件

在實際開發中會遇到要給動態生成的html元素繫結觸發事件的情況: <div id="testdiv"> <ul></ul> </div> 假設我們要給ul動態新增的<li>繫結click事件形成如下結果 &

Jquery給動態新增的元素繫結事件:live() delegate() on()

給已存在的元素繫結事件時可以直接寫： $(".class a").click(function(){ }) 但是對於動態生成並append()到頁面上的元素來說，就不能直接用上面的方法來繫結事件了。在Jquery 1.7之前我們可以通過live()和delega

關於 jquery html 動態新增的元素繫結事件——On()

Ajax動態生成的資料,動作繫結需要重新執行1 $(document).on('click','.btn1',function(){}); 2 3 替換： 4 5 $('btn1').on('click') = function(){};JQuery On()定義和用法on() 方法在被選元素及子元素上新

jquery動態新增元素無法觸發繫結的事件的解決方案。

　　最近遇到一個問題，即當用jquery動態新增元素後，發現給動態新增的元素卻無法觸發事件。後來在網上查閱了一些資料，發現原來要這樣處理：　　先上我出錯的程式碼: 　　 <!DOCTY

利用jquery給動態載入的元素繫結事件

工作中經常會遇見利用ajax載入dom元素，這樣就不能給動態載入的元素繫結時間此時可以利用jquery的on方法解決(老版本使用live方法) $(document).on("click",".edit-btn",function(){ aler

jQuery為動態元素繫結事件的方式

在使用jQuery的方式為元素繫結事件時，我經常使用bind或者click,但這隻能為頁面已經載入好的元素繫結事件。像需要用ajax的方式請求遠端資料來動態新增頁面元素時，顯然以上幾種繫結事件的方式是無效的，具體寫法如下圖。 $(selector).bind(event

41. jQuery-使用unbind（）方法移除元素繫結事件

1.效果圖 2.html程式碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>41. jQuery-使用unbind（）方法移出元

AngularJS中，如何給動態生成的元素繫結事件

1 . 我們知道在jquery中，動態生成一個元素，如果要在動態生成元素的同時，動態繫結事件，可以通過live/on方法（在jquery3.0中已經廢除了bind方法）。 2 . 在angularjs中，操作DOM一般在指令中完成，事件監聽機制是在對於已經靜態

從零開始學 Web 之 jQuery（五）操作元素其他屬性，為元素繫結事件

一、操作元素的寬和高 1、方法一元素.css("width"); 元素.css("height"); 最後得到的是字串型別的，比如 200px。如果我們在設定為原來寬高2倍的時候，就要先把獲取的寬高轉換成數字型別，再乘以2，這樣操作比較麻煩，有沒有簡單的方法呢？ 2、方法二元素.width(屬性

處理jQuery append加入的元素繫結事件無效的方法

問題是：通過jQuery append（或者before、after，一樣）新新增進網頁的元素，常用的事件不能觸發，比如：append了id 為 abc 的元素，那麼 $(#abc).click(function(){})是沒有效果的。 1. 網上說要用live()函式，親

微信小程式 js動態給前臺元素繫結事件

//js動態給前臺繫結事件 var myList = ["items1","items2","items3"] pageObject = { data:{ actionSheet

jquery查詢元素,繫結事件,DOM操作

//remove 會移除元素和元素關聯的事件//detach 只會移除元素$("#btn").click(function(){alert("123123");}); 遍歷節點$("strong").each(function(i,e){ //i 下標從0開始 //e 元素console.log(i,

jquery 動態新增元素的事件

開發專案時候選擇框DropDownList的Change事件，有時候需要多級級聯從而動態生成Select元素，但是此時的Select元素的Change事件無法觸發，非常苦悶。在專案中採用了兩種方式，一種是重新聲稱元素的時候，把事件寫入到partial的view中，但是這種

關於js動態渲染的元素繫結事件遇到的坑

總結一下今天專案中遇到的關於動態渲染元素繫結事件遇到的一些坑。首先作為後臺管理系統除左邊側邊欄外，右邊主體部分都是動態渲染出來的。第一：在給右側主體裡面元素繫結事件的時候，不要直接on繫結，而是用父元素代理事件來繫結，直接on是綁不上去的。第二：因為是動態渲染的元素

為未來元素繫結事件(JavaScript和jquery兩種方法對比)

小白 ~_~!! 日常打醬油一般我們為已經存在的元素繫結事件,那麼直接獲取這個元素的id,直接繫結上去就可以了. 但當這個元素不存在,將會我們又會新增進去的時候,直接獲取目標元素id繫結事件就會對未來新新增的元素失效了!!. 也就是你後來新新增這個元素,是無法被觸發的

jQuery動態新增的元素繫結事件

相關推薦