javascript - Issue with JS from fields obtained through Ajax response -

i use datatables in order create nicely displayed , managable table. data use ajax data source , prepared php script connect database , echo on screen date in json format.

assign.php

$q = "select o.id, a.id aid, o.starttime,o.scid, count(case when v.severity = '0' 1 else null end) zero,          count(case when v.severity = '1' 1 else null end) one,           count(case when v.severity = '2' 1 else null end) two,          count(case when v.severity = '3' 1 else null end) three, o.starttime start         topic a, project v, person o          a.id = v.topic_id , a.id = o.topic_id , o.starttime = '".$_get['date']."'         group o.id,o.starttime,o.scid,a.id order id desc"; $result = $db->query($q)->fetchall(pdo::fetch_assoc); $arr = array(); foreach ($result $row){     if ($row['scid']==1){         $button="<button     id=\"opener_".$row['aid']."\" class ='opener pure-button'  >edit</button>";     }     else{         $sys="";         $button="<button id=\"opener_".$row['aid']."\" class ='opener pure-button'  >assign</button>";     }     array_push($arr, array($button,$row['zero'],$row['one'],$row['two'],$row['three'],$row['starttime'])); } $str = json_encode($arr); $str= "{\"aadata\":".$str."}"; echo $str; 

page displaing table:

<script>  $(function() {     $( "#dialog" ).dialog({       autoopen: false,       show: {         effect: "blind",         duration: 1000       },       hide: {         effect: "explode",         duration: 1000       }     });      $( ".opener" ).click(function(event) {       $( "#dialog" ).dialog( "open" );       $('<input>').attr({         type: 'hidden',         id: 'assetid',         name: 'assetid',         value: event.target.id     }).appendto('#systemtoasset');     $("#divtodelete").remove();      var form = document.getelementbyid("nazwa");     var div = document.createelement("div");     div.id = 'divtodelete';     div.innerhtml = event.target.value;     form.appendchild(div);     });   });</script> <script>     $(document).ready(function() {         $('#asset').datatable( {             \"bprocessing\": true,             \"sajaxsource\": 'ajax/testdata.php'         } );     } );     </script> <table id='asset' class='display datatable' cellpadding='0' border='0' cellspacing='0' aria-describedby='example_info'>             <thead>                 <tr>                     <th width='20%'>button</th>                     <th width='25%'>low</th>                     <th width='10%'>medium</th>                     <th width='10%'>high</th>                     <th width='10%'>critic</th>                  </tr>             </thead>             <tbody>              </tbody>             <tfoot>                 <tr>                     <th width='20%'>button</th>                     <th width='25%'>low</th>                     <th width='10%'>medium</th>                     <th width='10%'>high</th>                     <th width='10%'>critic</th>                  </tr>             </tfoot>         </table> echo "<div id=\"dialog\"><br><br><p id='nazwa' >select person link project</p><br><br><br>           <form action='/?page=test' id='persontoproject' method='post' class='asholder'><input id='existing' name='existing' value='' class='txt' style='width: 125px;' /><input type='submit' name='saveperson' value='assign'></form>         </div>"; 

problem when user click on button displayed in table (loaded ajax) js handle click not being executed. there way solve issue?

i'm assuming click event using $(.open) in posted code button.

---

delegate bindings

---

you might need delegate event binding closest static element on page instead of on buttons directly.

if bindings scripts executed before buttons in dom events not bound.

in case, using jquery 1.7 or later can use on() delegation, similar this:

$('#asset').on('click', '.opener', function(event) { 

i'm assuming element id asset on page, otherwise use $(document) or $('body') instead.

this bind event static element (#asset) delegate '.opener' selector.

for versions of jquery pre 1.7 delegate() bind event instead, similar this:

$('#asset').delegate('.opener', 'click', function(event) { 

note parameter order between on() , delegate() differs!