表单按钮事件没有触发

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!"); 
}); 

这将适用于网页