"提交按钮单击未触发"

Question

I have a form like so and I am trying to get the submit-button to show an alert but it doesn't seem to be doing anything and I have no errors in the console. I have all the required jQuery included as I have a similar form in another section of the page and the input submit works but this form doesn't seem to be.

<div id="div_1" style="display:none;">
            <form id="form1">

               <fieldset style="border:0;">
                  <div>
                        <label for="name">Name</label>
                        <input id="name" name="name" placeholder="First name" required type="text">
                    </div>
                    <div>
                        <input id="submit-button" type="submit" value="Submit">
                    </div>

                </fieldset>
            </form>

            <div>
                <button id="close" type="submit" value="Close">
            </div>
        </div>

Answer 1

Make sure the javascript is ran after the element is in the doctree.

Use this instead of just your js:

$(document).ready(function())
{
    $("#submit-button").click(function(){
        alert("boo");
    });
}

This makes sure the DOM tree is loaded and then it'll bind the click event. If you bind the click event in a JS file, it could be loaded before the element is in the DOM tree, making the jQuery selector unable to find the element (thus the click event won't fire as it's not bound).

Answer 2

万一其他人出于与我相同的原因来到这里，只是提醒一下“提交”事件侦听器需要附加到表单本身，而不是提交按钮