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

我使用它是为了创建显示良好且可管理的表。为了获取数据，我使用Ajax数据源和准备好的php脚本，这些脚本连接到数据库，并以JSON格式回显屏幕上的日期

assign.php

显示表格的页面：

<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并没有被执行。有办法解决这个问题吗？

给提交按钮一个这样的id-

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

---

我假设您发布的代码中使用$.open的click事件是针对按钮的

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

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

在这种情况下，可以使用jQuery 1.7或更高版本与委派一起使用，如下所示：

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

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

我假设id资产的元素已经在页面上，否则使用$document或$body

这会将事件绑定到静态元素资产，但会将其委托给“.opener”选择器

对于jQuery 1.7之前的版本，请改为绑定事件，如下所示：

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

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

---

请注意，on和delegate之间的参数顺序不同

复制过程中出现错误。ofc行的正确版本为：$.opener。单击。然而，当我尝试您的代码并在单击后使用断点时，仍然一无所获。我相信这是因为按钮的内容是通过ajax获得的，每当我想在浏览器中加载站点的源代码时，我都看不到表内容。@grzzz：假设生成的HTML输出有效，您是否尝试过委托绑定解决方案？如果您是通过ajax加载内容，则之前的任何脚本都不会找到$'.open'，因为该元素当时不存在。如果您使用的是jQuery 1.7或更高版本，请使用on with delegation；如果您使用的是jQuery 1.4.2到jQuery 1.6.x，请使用delegate。我现在已经更新了我的答案，以便使用选择器。如果您仍然有问题，可以发布HTML标记输出，因为这将在呈现时显示实际按钮。谢谢@Francois$document。单击，'.opener'，functionevent{完成了任务！鼓励人们在上使用。