Fatal编程技术网

Javascript Jquery提交不起作用

javascript jquery html

Javascript Jquery提交不起作用,javascript,jquery,html,Javascript,Jquery,Html,我的jquery代码中有两个问题。我不明白它的原因 1.我调用f1（）两次-一次在“submit”eventhandler内部，另一次在处理程序外部。如果删除位于处理程序外部的f1（）调用，我可以看到在单击submit按钮时不会触发事件处理程序。（即没有警报弹出窗口） 2.每当弹出警报时，我总是看到我的ctypes.length为0。我想，它必须是形式中的字段数，即4 <!DOCTYPE html> <html> <head> <link href="h

我的jquery代码中有两个问题。我不明白它的原因

1.我调用f1（）两次-一次在“submit”eventhandler内部，另一次在处理程序外部。如果删除位于处理程序外部的f1（）调用，我可以看到在单击submit按钮时不会触发事件处理程序。（即没有警报弹出窗口）

2.每当弹出警报时，我总是看到我的ctypes.length为0。我想，它必须是形式中的字段数，即4

<!DOCTYPE html>
<html>
<head>
<link href="http://nvd3.org/assets/css/nv.d3.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<script>
function f1(){
ctypes = $("form.chart-series input:checkbox");
alert(ctypes.length);
}

f1();
$('.chart-series').submit(function(event){
    event.preventDefault();
    f1()
});
</script>
</head>
<body>
<div>
<form class="chart-series">
<ul>
<li><input type="checkbox" name="chart_name" value="1" checked/> a</li>
<li><input type="checkbox" name="chart_name" value="2" checked/> b</li>
<li><input type="checkbox" name="chart_name" value="3" /> c</li>
<li><input type="checkbox" name="chart_name" value="4" /> d</li>

<input type="submit" class="btn chart-submit" value="update"/>
</ul>
</form>
</div>
</body></html>


函数f1（）{
ctypes=$（“form.chart-series输入：复选框”）；
警报（ctypes.length）；
}
f1（）；
$（'.chart series'）。提交（函数（事件）{
event.preventDefault（）；
f1（）
});

    

  • a
    • 

  • b
    • 

  • c
    • 

  • d
    •
在页面底部插入脚本，并将代码包装在$（document）.ready（）中



    

  • a
    • 

  • b
    • 

  • c
    • 

  • d
    • 


$（文档）.ready（函数（）{
函数f1（）{
ctypes=$（“form.chart-series输入：复选框”）；
警报（ctypes.length）；
}
f1（）；
$（'.chart series'）。提交（函数（事件）{
event.preventDefault（）；
f1（）
});
});
将其包装在
$（document）.ready（）中


您的脚本代码在表单元素存在之前就已经执行了，因此您的长度当然为0，因为没有匹配的元素，而且您也没有将提交处理程序附加到任何内容。正如CBroe所说，在DOM就绪（$（document）.ready（function{}（））后运行您的代码

<!DOCTYPE html>
<html>
<head>
<link href="http://nvd3.org/assets/css/nv.d3.css" rel="stylesheet">
</head>
<body>
<div>
<form class="chart-series">
<ul>
<li><input type="checkbox" name="chart_name" value="1" checked/> a</li>
<li><input type="checkbox" name="chart_name" value="2" checked/> b</li>
<li><input type="checkbox" name="chart_name" value="3" /> c</li>
<li><input type="checkbox" name="chart_name" value="4" /> d</li>

<input type="submit" class="btn chart-submit" value="update"/>
</ul>
</form>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<script>
$(document).ready(function () {
function f1(){
ctypes = $("form.chart-series input:checkbox");
alert(ctypes.length);
}

f1();
$('.chart-series').submit(function(event){
    event.preventDefault();
    f1()
});
});
</script>
</body></html>



$( document ).ready(function() {
    function f1(){
        ctypes = $("form.chart-series input:checkbox");
        alert(ctypes.length);
    }

    f1();
    $('.chart-series').submit(function(event){
        event.preventDefault();
        f1();
    });
});