天天看點

JQuery中動态生成元素的綁定事件

今天在做項目的時候,遇到了一個前端的問題,坑了我好長時間沒有解決,今天就記錄于此,也分享給大家。

問題是這樣的,首先看看我的界面,有一個初始印象:

JQuery中動态生成元素的綁定事件

下面是操作列所對應的JS代碼:

JQuery中動态生成元素的綁定事件
JQuery中動态生成元素的綁定事件

.cshtml頁面上最後生成的modal視窗生成的區域定義:

操作modal模态視窗的JS的最終腳本為:

JQuery中動态生成元素的綁定事件
JQuery中動态生成元素的綁定事件

這裡,稍稍解釋一下:看到動态生成“編輯”按鈕的JS腳本中的a标簽中的class有一個ajax-demo沒有(我已用紅色字型标出)?其實這個類沒有任何樣式,隻是一個辨別類。其次,在操作modal的腳本中,先獲得模态視窗要顯示的區域,然後将含有“ajax-demo”類的元素綁定到click事件。這裡要講的主要的坑爹問題是綁定事件的問題。

一開始是這麼寫的,沒有擷取到元素,因而沒有執行綁定的click事件。

接下來,搜尋問題,搜尋到如下感覺比較靠譜的答案:

JQuery中動态生成元素的綁定事件
JQuery中動态生成元素的綁定事件
JQuery中動态生成元素的綁定事件
JQuery中動态生成元素的綁定事件
JQuery中動态生成元素的綁定事件
JQuery中動态生成元素的綁定事件

還是最後一個答案起了作用,首先,給了我一個不一樣的寫法的提示;其次,on,live以及bind都試過了,隻有live沒有綁定到click事件,bind雖然也綁定到click事件了,但是半天加載不出異步請求的資料,隻有on讓人滿意。

JQuery中動态生成元素的綁定事件

第一個是使用on綁定click事件的效果,第二個是bind綁定click事件的效果,bind最終是沒有加載出ajax内容。

本文轉自tkbSimplest部落格園部落格,原文連結:http://www.cnblogs.com/farb/p/4989046.html,如需轉載請自行聯系原作者

繼續閱讀