Question

我在jquery代码中遇到两个问题。我无法理解它的原因。

1.我在'submit'事件处理程序中调用f1（）两次 - 一次，在处理程序外调用第二个。如果我删除处理程序外部的f1（）调用，我可以看到单击提交按钮时不会触发事件处理程序。（即没有警报弹出窗口）

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>

Answer 1

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

中

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

Answer 2

将其包裹在$(document).ready()

中

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

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

Jquery提交无效

2 个答案: