Javascript 单击提交输入类型时jQuery没有响应_Javascript_Jquery

Javascript 单击提交输入类型时jQuery没有响应

javascript jquery

Javascript 单击提交输入类型时jQuery没有响应,javascript,jquery,Javascript,Jquery,我只是尝试在HTML中单击按钮时运行一个事件。目前，除了重新加载页面外，不会发生任何事情 HTML <form id="existing_queries_and_dates"> <div id="search_dates"> <h3>Available Dates</h3> <select id="date_range"> {% for date in date_range

我只是尝试在HTML中单击按钮时运行一个事件。目前，除了重新加载页面外，不会发生任何事情

HTML

<form id="existing_queries_and_dates">
    <div id="search_dates">
        <h3>Available Dates</h3>
        <select id="date_range">
            {% for date in date_range %}
            <option value="{{date}}">{{date}}</option>
            {% endfor %}
        </select>
        <input type="submit" id="submit_query_date_combo" value="Re-Load Table">
    </div>
</form>

我没有收到任何错误，但也没有收到警报或console.log

如果我删除

表单

标记，页面将不再重新加载，但我仍然不会收到警报或控制台。日志

因为您的

提交

按钮位于

表单

内，您需要使用

预防默认（）

避免在单击按钮时提交表单：

$("#submit_query_date_combo").on("click", function(e){
    e.preventDefault();
    console.log("Submitted!");
    alert("HIasd");
});

这可能是因为您在加载DOM之前正在运行javascript，并且由于没有找到DOM元素，因此没有将click事件处理程序附加到DOM元素。我建议您为

DOMContentLoaded

事件添加一个处理程序，然后附加DOM事件处理程序，如下所示：

document.addEventListener（“DOMContentLoaded”），函数（事件）{
$（“#提交#查询(日期)组合”）。在（“单击”上，函数（ev）{
console.log（“已提交！”）；
警报（“HIasd”）；
}); 
});

可用日期
0
请检查您的jquery是否正常工作，如果没有，请添加jquery的cdn。此外，您还可以将输入类型“提交”转换为“输入类型”按钮，并单击按钮提交表单。根据需要更改日期下拉列表值
 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#submit_query_date_combo').on('click',function(){
        console.log("Submitted!");
            alert("HIasd");
             $('#existing_queries_and_dates').submit();
         });
});
</script>
</head>
<body>
   <form id="existing_queries_and_dates">
        <div id="search_dates">
            <h3>Available Dates</h3>
            <select id="date_range">         
                <option value="0">0</option>            
            </select>
            <input type="button" id="submit_query_date_combo" value="Re-Load Table">
        </div>
    </form>

</body>
</html>


$（文档）.ready（函数（）{
$（“#提交(查询)(日期)组合”）。在（'click'，function（）上{
console.log（“已提交！”）；
警报（“HIasd”）；
$（“#现有的_查询_和_日期”）.submit（）；
});
});
可用日期
0
这个脚本与你的身体有什么关系？还有关于动态创建的表单的任何内容吗？@Taplar-噢，DUH！我有脚本导入在顶部。我刚移动到底部（就在
之前），它可以工作。非常感谢这个简单的提醒。你可以把它作为答案。（…或者我应该删除这个线程，因为当前的问题与HTML/.js本身无关。）嗯，这不起作用。什么也没有发生，也没有错误。编辑：这是因为我在哪里引入了.js文件。我移动到了
之前的位置，现在它可以工作了。这只是问题的一半，因为问题指出删除表单不会导致逻辑执行。您的javascript代码是否在$（function（）{}）
或$（document）.ready（）中
？@SevaKalashnikov-不。这一切都应该是吗？这取决于您是否要操纵dom，目前来说，这并不重要，但如果您想在html和css完全呈现后执行侦听器事件，则需要将其包装在$（function（）{}）@BruceWayne中
 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#submit_query_date_combo').on('click',function(){
        console.log("Submitted!");
            alert("HIasd");
             $('#existing_queries_and_dates').submit();
         });
});
</script>
</head>
<body>
   <form id="existing_queries_and_dates">
        <div id="search_dates">
            <h3>Available Dates</h3>
            <select id="date_range">         
                <option value="0">0</option>            
            </select>
            <input type="button" id="submit_query_date_combo" value="Re-Load Table">
        </div>
    </form>

</body>
</html>