javascript - 使用 JS 单击时不显示表单

Question

我已经制作了表单，并使用 CSS 显示属性隐藏它。我有按钮。我想在单击该按钮时显示表单。我已经完成了所有的工作，但仍然没有出现表格。

<input type="button" value="Popup" onclick="showLoginForm();"/>

<form id="loginForm" action="" method="post" style="display:none;">
        <p><strong>ID:</strong> </p>
        <strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
        <strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
        <strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
        <input type="submit" id = "submit" name="submit" value="Submit">
        </form>

下面是我的 JS 函数，它没有触发。

    $("button").click(function(e) {
    $("#loginForm").show();

    e.preventDefault();
});

Answer 1

函数showLoginForm()未定义。当您的按钮是输入类型时，您的 jquery 正在监听按钮单击。

$("input[type=button]").click(function(e) {
    $("#loginForm").show();

    e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />

<form id="loginForm" action="" method="post" style="display:none;">
        <p><strong>ID:</strong> </p>
        <strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
        <strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
        <strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
        <input type="submit" id = "submit" name="submit" value="Submit">
</form>

或者使用定义的函数:

function showLoginForm(){ 
    $("#loginForm").show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>

<form id="loginForm" action="" method="post" style="display:none;">
        <p><strong>ID:</strong> </p>
        <strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
        <strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
        <strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
        <input type="submit" id = "submit" name="submit" value="Submit">
        </form>