關於js動態渲染的元素繫結事件遇到的坑
總結一下今天專案中遇到的關於動態渲染元素繫結事件遇到的一些坑。
首先作為後臺管理系統除左邊側邊欄外,右邊主體部分都是動態渲染出來的。
第一:在給右側主體裡面元素繫結事件的時候,不要直接on繫結,而是用父元素代理事件來繫結,直接on是綁不上去的。
第二:因為是動態渲染的元素,因此一般的繫結事件方法會造成右側頁面區域性重新整理之後,事件會重複疊加。解決方法是繫結之前先進行事件解綁,我是用的off方法。當然我也想到過one這個方法,只是one方法繫結一次之後再次點選便沒有反應,具體原因尚未研究清楚,這個明天再去具體研究一下這個one方法。
第三:如果涉及到事件代理,一個父元素只能代理一次,如果好多個動態元素都用同一個父元素來做事件代理,那麼後面的事件會覆蓋掉前面父元素代理的事件。
相關推薦
jquery html 動態新增元素繫結事件
由於實際的需要,有時需要往網頁中動態的插入HTML內容,並在插入的節點中繫結事件處理函式。我們知道,用Javascript向HTML文件中 插入內容,有兩種方法, 一種是在寫HTML程式碼寫入JS,然後插入到文件中; 另外一種是通過ajax的方式,從伺服器獲取資料,然
給動態動態生成元素繫結事件不生效解決方法
JQ動態生成的元素,無法繫結事件,查詢到的原因是:繫結事件的元素必須是構造頁面時已經存在的,假如構造元素是不存在,是後動態生成,則繫結不了,解決方法,通過on()繫結舉例:$("body").on("c
關於js動態渲染的元素繫結事件遇到的坑
總結一下今天專案中遇到的關於動態渲染元素繫結事件遇到的一些坑。 首先作為後臺管理系統除左邊側邊欄外,右邊主體部分都是動態渲染出來的。 第一:在給右側主體裡面元素繫結事件的時候,不要直接on繫結,而是用父元素代理事件來繫結,直接on是綁不上去的。 第二:因為是動態渲染的元素
微信小程式 js動態給前臺元素繫結事件
//js動態給前臺繫結事件 var myList = ["items1","items2","items3"] pageObject = { data:{ actionSheet
jQuery動態新增的元素繫結事件
今天在做專案是時候發現動態新增的元素不能繫結事件,由於本人js和jquery技術有限,所以也不知道原因,一查才知道,動態新增的元素繫結事件就會失效,所以修改了一下。 jquery中繫結事件一般使用bind,或者click,但是這隻能是對已經載入好的元素定義事件,那些後來新增插入
js和jq的dom操作&&append的元素繫結事件失效
列數:var td=$("#toptable tr").eq(1).find("td").length; ps:當第一列是th的時候可以選擇find("th")然後就是弟0行,如果第一列不是th那麼可以直接eq(0)
JS實現迴圈給元素繫結事件的幾個常用方法
作為一個JS的初學者,想對一些元素迴圈繫結事件的時候總是出現各種問題,尤其是在對閉包沒有熟練掌握的時候更是一頭霧水。網上一查,果然好多初學者有這個困惑,既然這個問題總是出現,於是在我就總結了以下兩個比較好理解的解決方案,分享給大家:(可能還有更好的方式我沒有發現,請各位前輩
AngularJS中,如何給動態生成的元素繫結事件
1 . 我們知道在jquery中,動態生成一個元素,如果要在動態生成元素的同時,動態繫結事件,可以通過live/on方法(在jquery3.0中已經廢除了bind方法)。 2 . 在angularjs中,操作DOM一般在指令中完成,事件監聽機制是在對於已經靜態
jQuery-為動態新增的元素繫結事件(以及不重複新增新的內容)
在使用jQuery的方式為元素繫結事件時,我經常使用bind或者click,但這隻能為頁面已經載入好的元素繫結事件。像需要用ajax的方式請求遠端資料來動態新增頁面元素時,顯然以上幾種繫結事件的方式是無效的 $(selector).bind(event,d
利用jquery給動態載入的元素繫結事件
工作中經常會遇見利用ajax載入dom元素,這樣就不能給動態載入的元素繫結時間 此時可以利用jquery的on方法解決(老版本使用live方法) $(document).on("click",".edit-btn",function(){ aler
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
如何快速檢視某個js或某個元素繫結的js事件
複雜的表單,一般js函式或者某個元素對應的js事件,不是寫在同一個頁面,而是在頁面裡寫一個js引用而已,而且,該頁面引用了很多的js,當你很難從js命名規則找出具體的函式在那個js檔案時,你可以這樣做。開啟火狐瀏覽器的F12,選擇“調式器”頁籤,CTRL+P 搜
關於 jquery html 動態新增的元素繫結事件——On()
Ajax動態生成的資料,動作繫結需要重新執行1 $(document).on('click','.btn1',function(){}); 2 3 替換: 4 5 $('btn1').on('click') = function(){};JQuery On()定義和用法on() 方法在被選元素及子元素上新
為元素繫結事件和解綁事件的js相容程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head>
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()方法移出元
js IE和火狐繫結事件
<script> function(){ var EventUtil = { addHandler: function(element, type, handler){ if (element.addEventListener){
從零開始學 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()函式,親