Issue with JS from fields obtained through Ajax response

Question

I use DataTables In order to create nicely displayed and managable table. To get data I use Ajax data source and prepared php script which connect to database and echo on screen date in JSON format.

assign.php

$q = "select o.id, a.id as aid, o.starttime,o.scid, count(case when v.severity = '0' then 1 else null end) as zero, 
        count(case when v.severity = '1' then 1 else null end) as one,  
        count(case when v.severity = '2' then 1 else null end) as two, 
        count(case when v.severity = '3' then 1 else null end) as three, o.starttime as start
        from topic a, project v, person o 
        where a.id = v.topic_id and a.id = o.topic_id and o.starttime = '".$_GET['date']."'
        group by o.id,o.starttime,o.scid,a.id order by id desc";
$result = $db->query($q)->fetchall(PDO::FETCH_ASSOC);
$arr = array();
foreach ($result as $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 the 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 to link it with 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 is that when user click on the button displayed in table (loaded from ajax) the JS which handle the click is not being executed. Is there a way to solve this issue?

Answer 1

I'm assuming the click event using $(.open) in your posted code is for the button.

---

Delegate Bindings

---

You might need to delegate the event binding to the closest static element on your page instead of on the buttons directly.

If the bindings scripts are executed before the buttons are in the DOM the events will not be bound.

In that case, using jQuery 1.7 or later you can use on() with delegation, similar to this:

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

I'm assuming that the element with the id asset is already on the page, otherwise use $(document) or $('body') instead.

This will bind the event to the static element (#asset) but delegate it to the '.opener' selector.

For versions of jQuery pre 1.7 delegate() to bind the event instead, similar to this:

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

Note the parameter order between on() and delegate() differs!

Answer 2

Give the submit button an id like this--

<input type='submit' name='saveperson' value='Assign' id="submit">

and then in jquery code put--

 $("#submit").click(function(event) {
      //// code
     });