表单按钮事件未触发

时间:2013-07-05 16:43:30

标签: javascript jquery

我有这个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的任何按钮运行。我希望我清楚自己。

1 个答案:

答案 0 :(得分:3)

您不能拥有多个具有相同ID的元素。您可以像这样更改代码,

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

这将应用页面中的所有输入按钮