jquery 是否仍然与通过 ajax 显示的 dom 元素的附加 dom 元素功能相同？答案

【问题标题】：Do jquery still functions same with additional dom element via ajax as already displayed dom element?jquery 是否仍然与通过 ajax 显示的 dom 元素的附加 dom 元素功能相同？
【发布时间】：2014-02-19 01:03:08
【问题描述】：

我正在通过 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;
            }
        });
});

【问题讨论】：

$(document).on('click', '.delete', function(e) { };
如果您已回答，您将获得 +1 :) 无论如何谢谢

标签： javascript php jquery html ajax

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试这个

$(".delete").live('click',(function(e){ //write your action}) )

【讨论】：