html5 - Can't select/click elements created on the fly -

i need build div , inside write ul various li based on ajax results php function. wrote code:

$(function() {     $('#categories-picker').simpleslideview({duration: 250});      $(".step").click(function() {         var id = $(this).attr('data-id');         $.ajax({             type: 'get',             url: routing.generate('category_subcategories', {parent_id: id}),             datatype: "json",             success: function(data) {                 var k = 2;                 if (data.length != 0) {                     $("#cstep1").append('<div class="view" id="cstep' + k + '"><ul id="step' + k + '"></ul></div>');                      var lis = "";                     $.each(data, function(index, value) {                         $.each(value, function(i, v) {                             lis += '<li><a class="step" data-id="' + + '" href="#">' + v + '</a></li>';                         })                     });                      $('#cstep' + k).html(lis);                     k++;                 }             }         });     }); }); 

when call page first time html code built:

<div id="categories-picker" class="simpleslideview-container">     <div id="cstep1" class="view simpleslideview-view simpleslideview-view-active">         <h2>seleccione una categoría</h2>         <ul class="circle" id="step1">             <li><a data-id="1" class="step" href="#">monitors</a></li>             <li><a data-id="2" class="step" href="#">cameras</a></li>             <li><a data-id="4" class="step" href="#">scanners</a></li>             <li><a data-id="5" class="step" href="#">printers</a></li>             <li><a data-id="6" class="step" href="#">mice , trackballs</a></li>             <li><a data-id="7" class="step" href="#">mac</a></li>             <li><a data-id="8" class="step" href="#">pc</a></li>             <li><a data-id="9" class="step" href="#">software</a></li>             <li><a data-id="10" class="step" href="#">components</a></li>             <li><a data-id="11" class="step" href="#">phones &amp;amp; pdas</a></li>             <li><a data-id="12" class="step" href="#">desktops</a></li>             <li><a data-id="13" class="step" href="#">mp3 players</a></li>             <li><a data-id="14" class="step" href="#">laptops &amp;amp; notebooks</a></li>             <li><a data-id="15" class="step" href="#">windows</a></li>             <li><a data-id="16" class="step" href="#">macs</a></li>             <li><a data-id="17" class="step" href="#">tablets</a></li>         </ul>         <ul class="view-nav clearfix">             <li class="view-nav-contents pull-left"><a data-popview="" href="#nav">previous</a></li>             <li class="view-nav-next pull-right"><a data-pushview="" href="#how">next</a></li>         </ul>     </div> </div> 

if pick example "scanners" ajax call made , json result:

[{"27":"test10"},{"28":"test11"},{"29":"test12"}] 

so same jquery code should add div element new values , but:

• can't click/select new elements created , can't find cause of behavior
• the new created div suppose go after <div id="cstep1" ... , not inside , it's not

this code generated after make first ajax call:

<div id="cstep1" class="view simpleslideview-view simpleslideview-view-active">     <h2>seleccione una categoría</h2>     <ul class="circle" id="step1">         <li><a data-id="1" class="step" href="#">monitors</a></li>         <li><a data-id="2" class="step" href="#">cameras</a></li>         <li><a data-id="4" class="step" href="#">scanners</a></li>         <li><a data-id="5" class="step" href="#">printers</a></li>         <li><a data-id="6" class="step" href="#">mice , trackballs</a></li>         <li><a data-id="7" class="step" href="#">mac</a></li>         <li><a data-id="8" class="step" href="#">pc</a></li>         <li><a data-id="9" class="step" href="#">software</a></li>         <li><a data-id="10" class="step" href="#">components</a></li>         <li><a data-id="11" class="step" href="#">phones &amp;amp; pdas</a></li>         <li><a data-id="12" class="step" href="#">desktops</a></li>         <li><a data-id="13" class="step" href="#">mp3 players</a></li>         <li><a data-id="14" class="step" href="#">laptops &amp;amp; notebooks</a></li>         <li><a data-id="15" class="step" href="#">windows</a></li>         <li><a data-id="16" class="step" href="#">macs</a></li>         <li><a data-id="17" class="step" href="#">tablets</a></li>     </ul>        <ul class="view-nav clearfix">         <li class="view-nav-contents pull-left"><a data-popview="" href="#nav">previous</a></li>         <li class="view-nav-next pull-right"><a data-pushview="" href="#how">next</a></li>     </ul>     <div id="cstep2" class="view">         <ul id="step2">             <li><a href="#" data-id="27" class="step">test10</a></li>             <li><a href="#" data-id="28" class="step">test11</a></li>             <li><a href="#" data-id="29" class="step">test12</a></li>         </ul>     </div> </div> 

what i'm doing wrong?

udate

after read docs leave made changes jquery code still don't work:

$(function() {     $('#categories-picker').simpleslideview({duration: 250});      $("a.step").on("click", function() {         var id = $(this).attr('data-id');         $.ajax({             type: 'get',             url: routing.generate('category_subcategories', {parent_id: id}),             datatype: "json",             success: function(data) {                 var k = 2;                 if (data.length != 0) {                     $("#cstep1").after('<div class="view" id="cstep' + k + '"><ul id="step' + k + '"></ul></div>');                      var lis = "";                     $.each(data, function(index, value) {                         $.each(value, function(i, v) {                             lis += '<li><a class="step" data-id="' + + '" href="#">' + v + '</a></li>';                         })                     });                      $('#step' + k).html(lis);                     k++;                 }             }         });     }); }); 

$("#categories-picker").on("click",".step",function(e) {     //code });