javascript - html5jquery - click event not registering for html button tag - Stack Overflow

admin管理员组

文章数量:1322017

I am trying to validate a form, but I can't get any code to execute when my button is clicked. Here's my code:

<div id="vehicle_form">
    <form method="post" name="emailForm" action="">
    <input class="dField" id="dfEmail" type="email" name="email" value="Email" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
    <input class="dField" id="dfName" type="text" name="firstname" value="First Name" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
    <input class="dField" id="dfLast" type="text" name="lastname" value="Last Name" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
    <button type="button" id="dSubmit">Submit</button>
    </form>
</div>

$('#dSubmit').click(function(){
    console.log('click');
});

I am trying to validate a form, but I can't get any code to execute when my button is clicked. Here's my code:

<div id="vehicle_form">
    <form method="post" name="emailForm" action="">
    <input class="dField" id="dfEmail" type="email" name="email" value="Email" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
    <input class="dField" id="dfName" type="text" name="firstname" value="First Name" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
    <input class="dField" id="dfLast" type="text" name="lastname" value="Last Name" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
    <button type="button" id="dSubmit">Submit</button>
    </form>
</div>

$('#dSubmit').click(function(){
    console.log('click');
});

• javascript
• jquery
• forms
• html
• webforms

Share Improve this question Follow asked Aug 25, 2011 at 14:21 mheaversmheavers 30.2k6262 gold badges200200 silver badges326326 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You need to ensure that your jQuery is wrapped in a <script> tag, and ensure that the function is being loaded, perhaps by a $(document).ready() function, as shown below:

<script type='text/javascript'>
$(document).ready(function(){

    //Your Click event
    $('#dSubmit').click(function(){
        console.log('click');
    });

});
</script>

Working Demo

Actually the code stays wrong. A form can be often submitted by hitting enter inside of a textfield. If you want to make it right you should use the submit event.

<script>
$(function(){
    $('#vehicle_form > form').submit(function(){
        console.log('submit');
    });
});
</script>

本文标签： javascripthtml5jqueryclick event not registering for html button tagStack Overflow