【发布时间】：2015-08-15 18:57:18
【问题描述】：
在代码之后，我正在添加一个复选框并动态地与类（待办事项卡）进行跨度。单击跨度不会引发单击事件。 我写了一些 jquery 让它工作但不工作。任何帮助表示赞赏。 这个 span 元素添加了一个图标，我想在单击该图标时引发一个事件
================================================ ====================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Con - Admin Dashboard with Material Design</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="assets/_con/images/icon.png">
<!-- nanoScroller -->
<link rel="stylesheet" type="text/css" href="assets/nanoScroller/nanoscroller.css" />
<!-- FontAwesome -->
<link rel="stylesheet" type="text/css" href="assets/font-awesome/css/font-awesome.min.css" />
<!-- Material Design Icons -->
<link rel="stylesheet" type="text/css" href="assets/material-design-icons/css/material-design-icons.min.css" />
<link rel="stylesheet" type="text/css" href="assets/weatherIcons/css/weather-icons.min.css" />
<!-- nvd3 -->
<link rel="stylesheet" type="text/css" href="assets/nvd3/nv.d3.min.css" />
<!-- Google Prettify -->
<link rel="stylesheet" type="text/css" href="assets/google-code-prettify/prettify.css" />
<!-- Main -->
<link rel="stylesheet" type="text/css" href="assets/_con/css/_con.min.css" />
<!--[if lt IE 9]>
<script src="assets/html5shiv/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ToDo Card -->
<div class="col l8 s12">
<div class="card">
<div class="title">
<h5>Todo</h5>
<a class="close" href="#">
<i class="mdi-content-clear"></i>
</a>
<a class="minimize" href="#">
<i class="mdi-navigation-expand-less"></i>
</a>
</div>
<div class="content todo-card">
<div class="input-field">
<input id="todo-add" type="text"/>
<label for="todo-add">Add New</label>
</div>
</div>
</div>
</div>
<!-- /ToDo Card -->
</div>
</section>
<!-- DEMO [REMOVE IT ON PRODUCTION] -->
<script type="text/javascript" src="assets/_con/js/_demo.js"></script>
<!-- jQuery -->
<script type="text/javascript" src="assets/jquery/jquery.min.js"></script>
<!-- Materialize -->
<script type="text/javascript" src="assets/materialize/js/materialize.min.js"></script>
<!-- d3 -->
<script type="text/javascript" src="assets/d3/d3.min.js"></script>
<!-- nvd3 -->
<script type="text/javascript" src="assets/nvd3/nv.d3.min.js"></script>
<!-- Sortable -->
<script type="text/javascript" src="assets/sortable/Sortable.min.js"></script>
<!-- Main -->
<script type="text/javascript" src="assets/_con/js/_con.min.js"></script>
<!-- Google Prettify -->
<script type="text/javascript" src="assets/google-code-prettify/prettify.js"></script>
<script>
$(document).ready(function () {
test();
});
function test(){
for (var i = 0; i < 4; i++) {
var check='checkbox'+i;
var todo='hellooooooo'+i;
$('.todo-card').prepend('<div class="todo-task"> ' +
'<input type="checkbox" id=' + check + ' /> ' +
'<label for=' + check + '>' + todo + ' <span class="todo-remove mdi-action-delete"></span> ' +
'</label> </div> ');
}
}
$( ".todo-remove" ).on( "click", function() {
alert( 'span check');
});
$(document).on('click', 'input[type=checkbox]', function () {
alert( 'checkbox check');
});
</script>
</body>
</html>
【问题讨论】：
标签： jquery ajax html jquery-ui jquery-plugins