Question

我只是想让一个事件在我的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>

和我的 Javascript （这是文件中的唯一代码。我知道文件已正确链接，因此不应该成为问题）：

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

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

如果我删除了form标记，该页面将不再重新加载，但仍然无法获得警报或控制台。

Answer 1

由于您的submit按钮位于form内部，因此您需要使用preventDefault()来避免在单击按钮时提交表单：

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

Answer 2

这可能是因为您在加载DOM之前就运行了JavaScript，并且因为click事件处理程序未附加到DOM元素，因为它找不到它。我建议您为DOMContentLoaded事件添加处理程序，然后附加DOM事件处理程序，如下所示：

document.addEventListener("DOMContentLoaded", function(event) {
    $("#submit_query_date_combo").on("click", function(ev){
        console.log("Submitted!");
        alert("HIasd");
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="submit" id="submit_query_date_combo" value="Re-Load Table">
    </div>
</form>

Answer 3

请检查您的jquery是否正常工作，否则请添加jdn的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>

单击提交输入类型时，jQuery不响应

3 个答案: