代码之家 › 专栏 › 技术社区 › BruceWayne

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

jquery javascript

-2

BruceWayne · 技术社区 · 7 年前

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");
});

我没有得到任何错误,但是我也没有得到alert或console.log。

form

3 回复 | 直到 7 年前

Seva Kalashnikov 7 年前

自从你的 submit form 你需要使用 preventDefault()

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

f-CJ 7 年前

这可能是因为您在加载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>

Vishnu Chauhan 7 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前