javascript - Jquery 提交不起作用

标签 javascript jquery html

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

1.我调用 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>

最佳答案

在页面底部插入脚本并将代码包装在 $(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>

关于javascript - Jquery 提交不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25297878/

相关文章:

php - 将值从 PHP 传递到 Javascript 的权威方法

javascript - 在所有其他 JS 执行后运行 jQuery

javascript - 在 HTML 中使用计时器平滑滚动

html - 水平菜单中第一个 ul 的 CSS 没有图像

javascript - 我可以从子组件到父组件获取计算数据吗?

javascript - 使用 wget 将下载的文件名设置在不同的目录中

jquery - CSS 在克隆元素中不起作用

android - 在手机上设置 <select> 列表选项的样式

javascript - 无法让滚动动画与 jquery 一起使用

javascript - Angular JS - 连接到 Woocommerce OAuth v1