問題與「按鈕」和「：按鈕」選擇器

我是新來jquery和在學習階段。我已經寫了一個測試程序。問題與「按鈕」和「：按鈕」選擇器

<html> 
    <head> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $("Button").click(function(){ 
        $(this).parents(".ex").hide(); 
       }); 
       $(":button").click(function(){ 
        $(this).parents(".ex").hide("slow"); 
       }); 

      }); 
     </script> 
     <style type="text/css"> 
      .ex{ 
       background-color: #e5eecc; 
       padding: 7px; 
       border: solid 1px #c3c3c3; 
      } 
     </style> 
    </head> 
    <body> 
     <h3>Island Trading</h3> 
     <div class="ex"> 
      <input type="button" name="hid" value="Hide Me slowly"> 
      <p> Contact: Helen Bennett</p> 
      <p>Garden House Crowther Way</p> 
      <p>London</p> 
     </div> 
     <h3>Paris spécialités</h3> 
     <div class="ex"> 
      <button type="button">Hide Me Quick</button> 
      <p> Contact: Marie Bertrand</p> 
      <p>265, Boulevard Charonne</p> 
      <p>Paris</p> 
     </div> 
    </body> 
</html>

這是按預期工作。每當我點擊慢慢隱藏我，它隱藏得很慢。因爲帶有選擇器「：按鈕」的事件要求這樣做。和類似的隱藏我快速 - 選擇器是「按鈕」，它很快隱藏起來。

但是，一旦我改變腳本中事件處理函數的順序，它們都被隱藏得很慢。變化代碼

<script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $(":button").click(function(){ 
       $(this).parents(".ex").hide("slow"); 
      }); 

      $("Button").click(function(){ 
       $(this).parents(".ex").hide(); 
      }); 

    }); 
</script>

我的問題是，我沒有改變只是爲了被修改的選擇。對於選擇器「按鈕」，我已經寫了事件處理函數，只隱藏並沒有指定「慢」。但是，它隱藏得很慢。你可以請看看它，讓我知道爲什麼？

來源

2010-07-06 satya

:button將匹配類型按鈕的輸入以及按鈕元素。 Button將只匹配按鈕元素。因此，文檔中的Button元素會獲得綁定到其單擊事件的兩個處理程序，因爲它們正被兩個選擇器選中。

證明：http://jsfiddle.net/g7deV/

（當你點擊「隱藏我快」，這兩個警報會彈出如果更改事件處理程序的順序，這兩個警報仍然會彈出，只有在相反的順序。）

來源

2010-07-06 13:32:54 karim79

非常感謝！這是一個簡單的例子，很好的解釋。 – satya 2010-07-06 13:45:07

我會使用更具體的選擇器來做這樣的事情。給你的按鈕ID或類，並使用它來附加處理程序！像這樣：

<script> 
$(function(){ 
    $('#button1').click(function(){ 
     $(this).parents(".ex").hide("slow"); 

    }); 
}); 

</script>

來源

2010-07-06 13:36:07 Patricia

從jQuery documentation for the :button selector：

說明：選擇所有按鈕元素和類型的按鈕元件。

因此，您的button元素將有兩個附加到它的click事件處理程序。事件處理程序按照它們添加的順序執行，所以在原始代碼中，首先執行「快速」處理程序。當您更改事件處理程序的順序時，還會更改它們的執行順序，因此將首先執行「慢速」事件處理程序。

來源

2010-07-06 13:37:27

+1用於解釋爲什麼對象上的兩個事件處理程序產生了此結果。 – Chris 2010-07-06 13:42:13

+1謝謝你解釋詳細。 – satya 2010-07-07 06:31:46

問題與「按鈕」和「：按鈕」選擇器

回答

相關問題