表單按鈕事件沒有觸發

Question

我有這個jQuery事件代碼來處理點擊整個文檔，任何鏈接，按鈕和文本框。

 <script> 

      $(document).ready(function() { 
       //whole document 
       $('html').dblclick(function() { 
        alert('ouch!'); 
       }); 

       //any link 
       $('a').mouseover(function(){ 
        var message = "<p>You pointed a link!</p>"; 
        $('.main').append(message); 
       }); 

       //only one button ?     
       $('#button').click(function(){ 
        $(this).val("Stop it!"); 
       }); 

       //text field, I suppose it would have the same problem 
       //as button     
       $('#textfield').focus(function() { 
        $(this).css('background-color', '#F59898'); 
       }); 
      }); 

     </script> 

這個HTML表單代碼：

 <form action="#" method="get"> 
      <fieldset> 
       <legend>A Form</legend> 

       <p> 
        <input name="button" type="button" id="button" value="A Button" /> 
       </p> 

       <p> 
        <input name="textfield" type="text" id="textfield" /> 
       </p> 

       <p> 
        <input type="button" id="button" value="Doesn't work"/> 
       </p> 

      </fieldset> 
     </form> 

我無法理解在用戶點擊該按鈕的一部分，它改變了它的價值。對於單個按鈕它可以正常工作，但是當我添加具有相同ID（#button）的第二個按鈕時，它仍然只適用於第一個按鈕。我預計這將與我分配了該ID的任何按鈕一起運行。我希望我明確自己。

Answer 1

不能有多個具有相同ID的元素。你可以改變你這樣的代碼，

$('input[type=button]').click(function(){ 
    $(this).val("Stop it!"); 
}); 

這將適用於網頁