Click event not working on dynamically added span

Question

    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>

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — David, Aug 15 '15 at 18:59

score 2 · Answer 1 · answered Aug 15 '15 at 18:58

2

You need to update your code from

 $( ".todo-remove" ).on( "click", function() {
  alert( 'span check');
});

to

 $(document).on( "click",  ".todo-remove" , function() {
  alert( 'span check');
});

answered Aug 15 '15 at 18:58

Nikhil Aggarwal

28,197
4
43
59

@user1844634 - It ought to work. Please check again. Or you can also create a plunker/fiddle for the same and let me have a look at the working code – Nikhil Aggarwal Aug 15 '15 at 19:03
my dom structure is

. Clicking on the span not raising an click event. – user1844634 Aug 17 '15 at 12:46
With the given structure, the above solution should work. Can you create a plunker/fiddle? – Nikhil Aggarwal Aug 17 '15 at 12:51

Click event not working on dynamically added span

1 Answers1