Question

我使用DataTables为了创建漂亮的显示和可管理的表。为了获取数据，我使用了Ajax数据源和准备好的php脚本，该脚本以echo格式在屏幕日期连接到数据库和JSON。

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;

页面取代表格：

<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>";

问题是当用户点击表格中显示的按钮（从ajax加载）时，处理点击的JS没有被执行。有没有办法解决这个问题？

Answer 1

我假设您发布的代码中使用$(.open)的点击事件是针对该按钮的。

委托绑定

您可能需要将事件绑定委托给页面上最近的静态元素，而不是直接委托给按钮。

如果在按钮位于DOM之前执行绑定脚本，则不会绑定事件。

在这种情况下，使用jQuery 1.7或更高版本，您可以使用on()进行委派，类似于：

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

我 假设标识为asset的元素已在页面上，否则请改用$(document)或$('body')。

这会将事件绑定到静态元素（#asset），但会将其委托给'.opener'选择器。

对于jQuery pre 1.7 delegate()版本来绑定事件，类似于：

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

请注意on()和delegate()之间的参数顺序不同！

Answer 2

将提交按钮设为这样的ID -

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

然后在jquery代码中放置 -

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

通过Ajax响应获得的字段中的JS问题

2 个答案:

委托绑定