Following code, I am adding a checkbox and span with class (todo-card) dynamically. Clicking on the span not raising click event. I have written some jquery to make it work but not working. Any help is appreciated. this span element adds an icon, i want raise an event on clicking that icon
=============================================== ===================
<!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>
答案 0 :(得分:2)
您需要从
更新代码 $( ".todo-remove" ).on( "click", function() {
alert( 'span check');
});
到
$(document).on( "click", ".todo-remove" , function() {
alert( 'span check');
});