jquery動態添加元素無法觸發綁定事件的解決方案。


jquery動態添加元素無法觸發綁定的事件的解決方案。

 

╭(●`∀´●)╯二狗最近在工作中遇到一個問題,即當用jquery動態添加元素后,發現給動態添加的元素卻無法觸發事件(╯#-_-)╯╧═╧ ( ╯#-_-)╯┴—┴。后來在網上查閱了一些資料,發現原來要這樣處理๑乛◡乛๑:

先上我出錯的代碼:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
        //這里是動態添加元素
            $(".add").click(function(){
                var btn = $("<button class='newBtn btn btn-default'>新按鈕</button>");
                $("body").append(btn);
            })

        //這里是為添加的元素添加事件 $(".newBtn").click(function(){ alert("這里是新添加的元素觸發的事件"); }) }) </script> </head> <body> <button class=" add btn btn-default">添加按鈕</button> </body> </html>

 

奉上我的解決方法,大神們勿噴哦:.゚ヽ(。◕‿◕。)ノ゚.:。+゚

 

方法一:綁定live事件(live事件只在jquery1.9以下才支持,高版本不支持)。

 $(".newBtn").live("click",function(){ ///jquery 1.9(不包括1.9)以下可以
                alert('這里是動態元素添加的事件');
            })

 

方法二:利用on()事件綁定 ($(ParentEle).on("click",".thisEle",function(){})

  $("body").on("click", ".newBtn", function() {
                alert('這里是動態元素添加的事件');
            });
//這里的ParentEle是 thisEle的父輩元素或者祖先元素,ParentEle可以是document,也可以是body等。


//注意:如果此時調用的函數是外部定義好的函數,那在調用的時候不要加(),不然會跳過點擊事件直接觸發函數
  $("body").on("click", ".newBtn",aa );
 function aa(){
alert('這里是動態元素添加的事件');
}

 

٩(๑´0`๑)۶ ok,問題解決,繼續爬坑。

 

4.11更新:

動態添加表單元素,並使用bootstrapValidator插件進行動態添加校驗

/*新增列表后,新增元素加入到Validator中*/  
         $('#contentInfoForm').bootstrapValidator('addField', 'pushMenu['+(n-1)+'].text', {  
                validators: {  
                    notEmpty: {  
                        message: '推送業務內容不能為空'  
                    }  
                }  
            });

 

傳送門

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM