提交按钮单击未触发答案

【问题标题】：Submit button click not firing提交按钮单击未触发
【发布时间】：2022-01-28 17:14:07
【问题描述】：

我有一个这样的表单，我试图让提交按钮显示警报，但它似乎没有做任何事情，我在控制台中没有错误。我包含了所有必需的 jQuery，因为我在页面的另一部分有一个类似的表单，并且输入提交工作，但这个表单似乎不是。

<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>

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

【问题讨论】：

Why is this JQuery click function not working?的可能重复
请发布您所面临问题的最小、可验证示例。
为什么在input id=name之后关闭div标签？
@makshh 对不起，我忘了在上面的例子中添加一个 div。

标签： javascript jquery html forms

【解决方案1】：

确保 javascript 在元素位于 doctree 之后运行。

使用这个而不是仅仅使用你的 js：

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

这确保 DOM 树已加载，然后它会绑定 click 事件。如果在 JS 文件中绑定 click 事件，它可能会在元素在 DOM 树中之前被加载，导致 jQuery 选择器无法找到元素（因此 click 事件不会触发，因为它没有被绑定）。

【讨论】：

弹窗是动态创建的吗？因为如果您在 javascript 中创建一个弹出窗口，则不会绑定 click 事件。
我有两个 div，所以显示 div 1 而隐藏 div 2，当我在第一个 div 中单击提交时，它通过 ajax 发布数据并用此代码替换它$('#div').html($('#div_1').html());
但是我在那个 div 中有一个关闭按钮，它有一个点击事件并且它可以工作！

【解决方案2】：

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

【讨论】：