給DOM操作生成的元素添加事件


問題:通過js給頁面添加新元素,並給該元素添加綁定事件,但新添加的元素上卻沒有綁定任何事件。

常見例子:在處理表格的時候,每行行末有個刪除按鈕,如下圖。點擊刪除按鈕的時候刪除這一行。

//html部分
    <table border="" cellspacing="" cellpadding="" class="text-center">
            <caption class="text-center">用戶信息表</caption>
            <tr>
                <td>序號</td>
                <td>姓名</td>
                <td>性別</td>
                <td>年齡</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td>張三</td>
                <td>男</td>
                <td>18</td>
                <td>
                    <a class="deltr">刪除</a>
                </td>
            </tr>
        </table>
        <button class="btn btn-info">添加</button>



//js部分
$(function() {
            $("button").on("click", function() {
                $("table").append('<tr><td>2</td><td>張三</td><td>男</td><td>18</td><td><a class="deltr">刪除</a></td></tr>');
            })
            $(".deltr").on("click", function() {
                $(this).parents("tr").remove();
            })
        })
View Code

如果上圖中的刪除按鈕在dom操作前就在頁面中的話,給其添加是可以的;如果表格中的每行都是通過dom操作添加的話,可以發現,刪除按鈕上卻沒有綁定任何事件。那么要怎么做才可以給dom生成的元素添加事件呢?

方法一:onclick法

$(function() {
  $("button").on("click", function() {
    $("table").append('<tr><td>2</td><td>張三</td><td>男</td><td>18</td><td><a onclick="deltr(this)">刪除</a></td></tr>');
  })

})
function deltr(delbtn){
  $(delbtn).parents("tr").remove()
}

 ps:該方法沒有實現結構與行為分離的准則。關於dom操作添加事件一般采用的都是該方法。

 注意:此時的deltr這個function必須是全局函數,得放在$(function(){})外面,放里面就成局部函數了,html里的onclick就調用不到了。

方法二:DOM 生成事件后綁定

  在dom操作生成元素之后,添加事件。如下

$(function() {
  $("button").on("click", function() {
    $("table").append('<tr><td>2</td><td>張三</td><td>男</td><td>18</td><td><a>刪除</a></td></tr>');
$(
"table a").on("click",function(){ deltr($(this)); })   }) }) function deltr(delbtn){   $(delbtn).parents("tr").remove() }

方法三: 事件委托

$("body").on("click", "table a", function(){
   deltr($(this));
})

  

運行此段代碼,會發現功能根本無法實現。這是因為此時函數內的 this 指向 body

 

$("body").on("click", "table a", function(e){
   if(e.target.nodeName = "a"){
         console.log($(this))
    }
})

因為事件是冒泡的,所以我們要阻止冒泡到 body 之前,使用 e.target 截取到觸發事件的元素上。

 


免責聲明!

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



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