單擊提交輸入類型時 jQuery 沒有響應

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標簽，頁面不再重新加載，但我仍然沒有收到警報或 console.log

Answer 1

由於您的submit按鈕位於form內，因此您需要使用preventDefault()來避免在單擊按鈕時提交表單：

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

Answer 2

這可能是因為您在加載 DOM 之前運行了 javascript，並且因為找不到它，所以單擊事件處理程序未附加到 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 是否正常工作，如果沒有，請添加 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>

單擊提交輸入類型時 jQuery 沒有響應

問題描述

3 個解決方案

解決方案1
0 2018-08-22 17:51:01

解決方案2
0 2018-08-22 18:00:43

解決方案3
0 2018-08-22 18:09:51

單擊提交輸入類型時 jQuery 沒有響應

問題描述

3 個解決方案

解決方案1 0 2018-08-22 17:51:01

解決方案2 0 2018-08-22 18:00:43

解決方案3 0 2018-08-22 18:09:51

解決方案1
0 2018-08-22 17:51:01

解決方案2
0 2018-08-22 18:00:43

解決方案3
0 2018-08-22 18:09:51