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

時間 2019-12-05

標籤 jquery 綁定 click 直接區別欄目 JQuery 简体版

原文原文鏈接

情況以外

在以前的公司並無遇到這個問題，也就沒有深究。直到本身換了如今的公司，剛來次日就開始寫別人寫到一半的項目，很無奈，不是原生就是jquery，因爲項目急，已經來不及切換框架從新佈局，只能繼續了。

情況之中

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

情況-解決唄

當時知道的緣由是動態建立的元素在初始化的時候尚未，那我綁定的事件怎麼可能綁定的上嘛（當時還不知道直接綁定和經過on()綁定click的區別，也不知道on('click',param，param,callback)下面介紹的用法）

<p>解決方法html

$("#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,'</br>')
                    },'../../images/ok-ico.png',function(){
                        window.location.reload();
                    })
                })
            })
        }
    })

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

。。。。。。。。。。node

情況以後的很久很久之後

那就是如今啦，看到別人的代碼

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

我真的想對本身說「what are you 弄啥嘞」。
當時真的是沒想那麼多啊。在網上查了一下都說on('click',callback)適用於動態元素，click適用於靜態元素。可是並無說爲何。上面廢話一大堆，下面我說一下個人理解吧。

先說一下js中的預解釋

頁面初始化jquery

變量ajax

函數
json

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

on('click',callback)和click在初始化時的區別app
1. 綁定靜態元素：元素存在，預解釋OK，因此是沒啥區別啦；
2. 綁定動態元素：元素不存在，預解釋，元素都找不到，咋預解釋啊，因此無論是on()仍是click()都沒有辦法；
3. 綁定靜態元素實現動態元素的事件綁定：

<html>

    <div class="test">
        <button class="new" id="newon">NewOn</button> 
        <button class="new" id="newclick">NewClick</button>
        <ul class="li"> 
            <li>原先的HTML元素on<button class="deleteon">Delete</button></li> 
            <li>原先的HTML元素click<button class="deleteclick">Delete</button></li> 
        </ul> 
    </div>
    <script>
        $("#newclick").click(function(){ 
            $(".li").append('<li>動態添加的HTML元素click<button class="deleteclick">Delete</button></li>'); 
        });
        $("#newon").click(function(){ 
            $(".li").append('<li>動態添加的HTML元素on<button class="deleteon">Delete</button></li>'); 
        });
        $(".delete").click(function(){ 
            $(this).parent().remove(); 
        }); 
        //刪除選中元素
        $(".li").on('click', ".deleteon", function(){
            $(this).parent().remove(); 
        })
        //看看，刪除不了吧
        $(".deleteclick").click(function(){ 
            $(this).parent().remove(); 
        });
    </script>
    
</html>