用jQuery.delegate()將事件綁定在父元素上面


1.先看看官方的示例:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("button","click",function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<div style="background-color:red">
<p>這是一個段落。</p>
<button>請點擊這里</button>
</div>

</body>
</html>

2.該方法的定義如下:

$(selector).delegate(childSelector,event,data,function)

delegate() 方法為指定的元素(屬於被選元素的子元素)添加一個或多個事件處理程序,並規定當這些事件發生時運行的函數。

使用 delegate() 方法的事件處理程序適用於當前或未來的元素(比如由腳本創建的新元素)

3.在用ajax的異步加載數據的時候,由於界面上綁定事件已經無效了,用這種方法將事件綁定在父級元素上面就避免了每次異步請求數據之后都要重新綁定方法的煩惱了。

有的朋友可能還有疑惑,命名綁定了事件的,怎么就是不觸發呢?因為ajax之后你的頁面元素被重寫了,而界面初始化時綁定的事件是綁在ajax還沒有執行的時候。我每次遇到用ajax加載數據更新頁面內容時就是用這種方法綁定事件的。

看我項目中的一個栗子:

/**
* 點擊行事件
**/
$('#table_tbody').delegate('tr','click',function(){
    //do something
});

/**
* 每行的點擊提交按鈕
**/
 $('#table_tbody>tr').delegate('.SUBMIT','click',function(){
    //do something
});

  

就說這么多啦,不對的地方歡迎指出。

 


免責聲明!

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



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