jQuery的on綁定click和直接綁定click區別

jayce 發布于2019-08-23 12:23 / 1239人閱讀

摘要：我綁定的事件無效。狀況總結動態元素綁定用，靜態元素綁定兩者都可以，為了代碼的統一還是都用吧，切記，可以篩選元素哦

狀況之外

在之前的公司并沒有遇到這個問題，也就沒有深究。直到自己換了現在的公司，剛來第二天就開始寫別人寫到一半的項目，很無奈，不是原生就是jquery，由于項目急，已經來不及切換框架重新布局，只能繼續了。

狀況之中

到處都是列表，到處都是js創建的動態頁面，好吧，那我也繼續吧，突然，意外發生了。我綁定的click事件無效。

狀況-解決唄

當時知道的原因是動態創建的元素在初始化的時候還沒有，那我綁定的事件怎么可能綁定的上嘛（當時還不知道直接綁定和通過on()綁定click的區別，也不知道on("click",param，param,callback)下面介紹的用法）

解決方法

$("#list").on("click",function(e){
        var ev = e || window.event;
        var target = ev.target || ev.srcElement;
        if (target.nodeName.toLowerCase() == "a" && target.className=="reset") {
            msgconfirm("","是否確認重置密碼？",function(){
                ajax("/user/reset?id="+target.type,"","get","json",null,function(data){
                    var userObj=data.tUser;
                    tipalert("",{
                        data:"密碼重置成功",
                        username:userObj.account,
                        password:userObj.passWord,
                        uKey:userObj.key.replace(/,/img,"
")
                    },"../../images/ok-ico.png",function(){
                        window.location.reload();
                    })
                })
            })
        }
    })

jquery+原生，我也不想的，可是我又找不到別的解決方案，解決就OK了，雖然不好看，性能也不是太好，但是我也沒有深究。

。。。。。。。。。。

狀況之后的好久好久以后

那就是現在啦，看到別人的代碼

$("body").on("keyup","#userId,#password",function(){
        if(event.keyCode==13){
            loginFunc();
        }
    });

我真的想對自己說“what are you 弄啥嘞”。
當時真的是沒想那么多啊。在網上查了一下都說on("click",callback)適用于動態元素，click適用于靜態元素。但是并沒有說為什么。上面廢話一大堆，下面我說一下我的理解吧。

先說一下js中的預解釋

頁面初始化

變量

函數

看完預解釋就說一下今天的主題吧

on("click",callback)和click在初始化時的區別

綁定靜態元素：元素存在，預解釋OK，所以是沒啥區別啦；

綁定動態元素：元素不存在，預解釋，元素都找不到，咋預解釋啊，所以不管是on()還是click()都沒有辦法；

綁定靜態元素實現動態元素的事件綁定：



    
         
        
         
            原先的HTML元素on 
            原先的HTML元素click

onclick的用法（jquery、jquery+原生）

關于用法，上面已經介紹了，這個也是我今天才知道的，原來在綁定事件的時候就可以加入元素，而我竟然轉到了原生，一看就很菜，小白啊小白。

狀況總結

動態元素綁定用on()，靜態元素綁定兩者都可以，為了代碼的統一還是都用on()吧，切記，on("click",param1,param2,callback)可以篩選元素哦！！！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98433.html

JQuery基礎修煉-事件篇

摘要：目錄第章事件介紹第章鼠標事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中，最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監聽用戶單擊操作，另一個方法是方法用于監聽用戶雙擊操作。目錄第1章事件介紹第2章鼠標事件第3章表單事件第4章鍵盤事件第5章事件的綁定和解綁第6章事件對象的使用第7章自定義事件 cli...

yy13818512006 2019-08-02 15:55 評論0 收藏0
JQuery基礎修煉-事件篇

摘要：目錄第章事件介紹第章鼠標事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中，最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監聽用戶單擊操作，另一個方法是方法用于監聽用戶雙擊操作。目錄第1章事件介紹第2章鼠標事件第3章表單事件第4章鍵盤事件第5章事件的綁定和解綁第6章事件對象的使用第7章自定義事件 cli...

hikui 2019-08-19 18:25 評論0 收藏0
jQuery源碼解析之你并不真的懂事件委托及target和currenttarget的區別

摘要：源碼源碼行被點擊了點擊了，即委托的事件被點擊了優先添加委托，再添加其他即委托在上的事件數量在下標為的位置插入委托事件解析可以看到，是優先添加委托事件，再添加自身事件，觸發事件的時候也是按這個順序。 showImg(https://segmentfault.com/img/remote/1460000019419722); 前言：請先回顧下我之前寫的一篇文章：JavaScript之事件委...

khs1994 2019-08-23 18:01 評論0 收藏0
jQuery 事件(三) 事件的綁定和解綁、對象的使用、自定義事件

摘要：事件的綁定和解綁的多事件綁定之前學的鼠標事件，表單事件與鍵盤事件都有個特點，就是直接給元素綁定一個處理函數，所有這類事件都是屬于快捷處理。由于瀏覽器事件冒泡特性，可以在觸發時把這個事件往上冒泡到上，因為上綁定事件響應，所以能觸發這個動作。事件的綁定和解綁 on()的多事件綁定之前學的鼠標事件，表單事件與鍵盤事件都有個特點，就是直接給元素綁定一個處理函數，所有這類事件都是屬于快捷處理...

niuxiaowei111 2019-08-22 10:53 評論0 收藏0