javascript - jquery 是否仍然通过 ajax 与已显示的 dom 元素一样使用其他 dom 元素？

Question

我通过 ajax 提交表单并在同一页面上显示添加的字段，以及编辑和删除按钮。已经添加的字段显示在页面加载时，进一步添加通过 ajax 显示。删除按钮 (在提交的ajax之后添加)即使在页面加载删除按钮时也不会对点击采取任何行动..我是不是对 jquery 有一些误解并且弄错了，我怎样才能让它工作

数据库中已经添加的字段是

....
<script type="text/javascript">
$(function() 
    {
        $("#edit2").click(function(e) { 

           $("#username").val($("#u_name_2").text());
           $("#uemail").val($("#u_email_2").text());  
           $("#editdata").html('Edit and Save')  ;
          $(".hiddclass").val('2');
        });

    });
</script>
<div id="info_2">
                      <div id="formdisplay">
                        <table class="table table-striped">
                          <tbody><tr>
                            <td> Username</td>
                            <td id="u_name_2">Sachin</td>
                          </tr>
                          <tr>
                            <td> Email :</td>
                            <td id="u_email_2">sachin@india.com</td>
                          </tr>
                        </tbody></table>
                      </div>
                      <a class="btn btn-info" id="edit2" type="button" href="#editform">Edit</a>
                       <a class="btn btn-danger delete" id="delete_2" type="button" href="#editform">Delete</a>
                    </div>
....

ajax提交后，显示值为

<script type="text/javascript">
    $(function() 
        {
            $("#edit14 ").click(function(e) { 

               $("#username").val($("#u_name_14").text());
               $("#uemail").val($("#u_email_14").text());  
               $("#editdata").html('Edit and Save')  ;
               $(".hiddclass").val('14');
            });
        });
    </script>
<div id="info_14">
      <div id="formdisplay">
        <table class="table table-striped">
          <tbody><tr>
            <td> Username</td>
            <td id="u_name_14"> ghg</td>
          </tr>
          <tr>
            <td> Email :</td>
            <td id="u_email_14">hj</td>
          </tr>
        </tbody></table>
      </div>
      <a class="btn btn-info" id="edit14" type="button" href="#editform">Edit</a>
      <a class="btn btn-danger delete" id="delete_14" type="button" href="#editform">Delete</a>

    </div>

单击删除按钮时，我调用了 jquery，它在 db 中已经显示的 div 上工作正常，但是对于第二种情况，当我调用 div 表单 ajax 时，删除按钮无法像案例 1 那样运行

<script type="text/javascript">
$(function() 
    {
$(".delete").click(function(e) { 

            var r=confirm("Sure Want To Change Status?")
            {       
                $id=$(this).parent().attr('id');

                alert($id);
                    $.ajax({
                            type:'GET',
                            url: "include/process.php",
                            data: {id: $id, todel:'Delete' },
                            cache: true,
                            async   : false,
                            error: function(){
                                alert ('error');
                            },
                            success: function(data)
                            {
                                alert(data);
                                // on_success_my_action



                            }
                        });
                    return false;
            }
        });
});

Answer 1

如果你想管理动态创建的内容，你必须使用 .on() : https://api.jquery.com/on/

jQuery 只允许在加载 DOM 时管理已经存在的内容。