Question

我咨询了很多帖子，但找不到解决问题的方法。

我使用ajax将一个文件（CrList.htm，其中包含一个表单）加载到div（CrTable）中：

    //POST
    $.post ( $("#myForm").attr("action"),
            $("#myForm :input").serializeArray(),           
            function(info) {

                    $("#editCourse").empty();
                    $("#editCourse").html(info.message);

                    reloadList();



                }, "json" );


            $("#myForm").submit( function() {
                return false;
            });



                  $(this).val("");                                                                             
    });
}

function reloadList() {
    $("#CrTable").load("CrList.htm"); //Load the content into the div
}

表单加载完美但当我单击提交按钮时，也是动态生成的，没有任何反应。

以下是表格：

<form name="CrEditForm" id="CrEditForm" action="" method="POST">
    <table id="RCRCoursesTable" style="corder-collapse: collapse; border-spacing:0px;">



        <?php

        while ($row = mysql_fetch_array($result)):

        if ($num&1) { 
            $myStyle="background-color:#CCCCCC;";
        }
        else
        {
            $myStyle="background-color:#FFFFFF;";
        }
            echo "<tr id=\"$num\" style=\" $myStyle \"><td style=\"padding:0px;\">" . htmlentities($row["course"]) . "</td>";
            echo "<td style=\"padding:0px;\">" . htmlentities($row["language"]) . "</td>";
            echo "<td style=\"padding:0px;\">" . htmlentities($row["date"]) . "</td>";
            echo "<td style=\"padding:0px;\">" . htmlentities($row["stime"]) . "</td>"; 
            echo "<td style=\"padding:0px;\">" . htmlentities($row["etime"]) . "</td>";     
            echo "<td style=\"padding:0px;\">" . htmlentities($row["roomorsection"]) . "</td>";

            $courseID=$row["courseid"];
            $num=$num+1;        
        ?>

        <td>

        <input type="button" value="Edit" class="action edit" data-id="<?php echo $courseID; ?>" />
        </td>
        <td>            

            <input type="button" value="Delete" class="action delete" data-id="<?php echo $courseID; ?>" />

        </td>

        <?php
        echo "</tr>\n";
        endwhile;


        ?>

        </table>    
    </form>

以下是按钮点击时执行的代码：

   var url = 'editCr.php';
    $(function() {
      $('.action').click(function(e) {
        e.preventDefault();
        var id = $(this).data('id');


        var parent = $(this).closest('TR');
        var tr_id = parent.attr('id');


        var action = $(this).hasClass('edit') ? 'edit' : 'delete';
        $.ajax({
          url: url,
          data: {id: id, action: action, tr_id: tr_id},
          type: 'POST',
          success: function(result) {


        $("#ackUpdate").html('');
        $("#editCourse").html(result);


      }
    });
  });
});

我怀疑是因为表单没有绑定或集成到已加载的htm文件中，但我不知道该怎么做。

Answer 1

当您通过ajax更新按钮时，事件将丢失。

试试这个：

$(document).on('click', '.action', function(e) {
    // ...
});

动态加载表单使用ajax无法正常工作

1 个答案: