2017-01-24 71 views
5

之間有什麼不同我知道jquery .on()的用法和用途,因爲我使用它。

,但我想知道什麼是$之間的差異(文件)。在()與$(元素)。在()在這個腳本

<html> 
... 
<body> 
... 
<table id="table-user"> 
<thead>...</thead> 
<tbody> 
AJAX DINAMYC CONTENT 
</tbody> 
</table> 
.... 
<script> 
$(document).on('click','.btn-edit',function(){ 
go_edit(); 
}); 

$('#table-user').on('click','.btn-edit',function(){ 
go_edit(); 
}); 

</script> 
</body> 
</html> 

是任何性能不同,或者他們之間的其他什麼東西?

+1

[差異$之間(文件)。在和$的可能的複製( '#submit').on](http://stackoverflow.com/questions/27813791/difference-between-document-on-and-submit-on) –

+0

owh man。我得到了答案。非常感謝 – plonknimbuzz

回答

5

主要區別已經被@Mukesh回答。 我會嘗試添加一件事。

當您單擊(或任何其他活動)的HTML文檔中的元素(如DIV按鈕)上,即點擊事件被傳播到該元素的父元素。所以,如果你有結構是這樣的:

<div> 
    <table> 
     <tr> 
      <td> 
       <button>Click Me</button> 
      </td> 
     </tr> 
    </table> 
</dvi> 

和您點擊此按鈕,點擊會傳播到TD,然後到TR,然後到表,然後最後文件本身。

現在可以說你已經註冊文檔上的click事件($ document.on( '點擊',...))以及按鈕($(button.on( '點擊', ...))),兩者都做了一些不同的操作。然後,如果你點擊按鈕,相應的按鈕動作將被執行,同時$(document)的相應動作也會被執行。

爲了防止按鈕單擊傳播到文檔本身,你需要點擊按鈕處理程序操作(如stopPropagation等)

6
$(document).on('click','.btn-edit',function() 

這會將點擊事件綁定到文檔及其中的所有子元素。這種方法被稱爲委託事件處理。

$('#table-user').on('click','.btn-edit',function() 

直接將點擊事件綁定到#表用戶。直接在元素上捕獲事件。

+0

任何性能不同? – plonknimbuzz

+0

@plonknimbuzz:如果可能,最好在較高的節點處理事件。就像每行有一個帶有按鈕的表一樣,那麼最好不要在每個按鈕上註冊一個事件,而是最好在表中註冊該事件並編寫代碼以在表事件處理程序上執行所需的操作。 –

相關問題