通过AJAX做jQuery的功能仍然相同额外的DOM元素已经显示DOM元素?元素、功能、AJAX、jQuery

2023-09-10 17:02:43 作者:易烊千玺的未公开女友

我提出通过AJAX的格式,并显示所添加的字段在同一页上,以及编辑和删除按钮。该已添加字段显示在页加载和进一步加入通过ajax..The删除按钮(显示从提交)不承担单击任何行动甚至在页面加载删除按钮阿贾克斯之后增加.. 我收到jQuery的一些误解,并得到它错了,我怎样才能使它工作

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

  ....
<脚本类型=文/ JavaScript的>
$(函数()
    {
        $(#EDIT2)。点击(函数(五){

           $(#用户名)VAL($(#u_name_2)文本()。)。
           $(#uemail)VAL($(#u_email_2)文本()。)。
           $(#editdata)HTML(编辑和保存)。
          $(。hiddclass)VAL('2');
        });

    });
< / SCRIPT>
< D​​IV ID =info_2>
                      < D​​IV ID =formdisplay>
                        <表类=表的表条纹>
                          < TBODY>< TR>
                            < TD>用户名和LT; / TD>
                            < TD ID =u_name_2>萨钦< / TD>
                          < / TR>
                          &其中; TR>
                            < TD>电子邮件:LT; / TD>
                            &LT; TD ID =u_email_2&GT; sachin@india.com< / TD&GT;
                          &LT; / TR&GT;
                        &LT; / TBODY&GT;&LT; /表&gt;
                      &LT; / DIV&GT;
                      &LT;一类=BTN BTN-INFOID =EDIT2型=按钮的href =#editform&gt;编辑&LT; / A&GT;
                       &其中;一类=BTN BTN-危险删除ID =delete_2类型=按钮的href =#editform&GT;删除&所述; / a取代;
                    &LT; / DIV&GT;
....
 

在提交了Ajax,显示值为

 &LT;脚本类型=文/ JavaScript的&GT;
    $(函数()
        {
            $(#edit14)。点击(函数(五){

               $(#用户名)VAL($(#u_name_14)文本()。)。
               $(#uemail)VAL($(#u_email_14)文本()。)。
               $(#editdata)HTML(编辑和保存)。
               $(。hiddclass)VAL('14');
            });
        });
    &LT; / SCRIPT&GT;
&LT; D​​IV ID =info_14&GT;
      &LT; D​​IV ID =formdisplay&GT;
        &LT;表类=表的表条纹&GT;
          &LT; TBODY&GT;&LT; TR&GT;
            &LT; TD&GT;用户名和LT; / TD&GT;
            &所述; TD的id =u_name_14&GT;温室气体&LT; / TD&GT;
          &LT; / TR&GT;
          &其中; TR&GT;
            &LT; TD&GT;电子邮件:LT; / TD&GT;
            &LT; TD ID =u_email_14&GT; HJ&LT; / TD&GT;
          &LT; / TR&GT;
        &LT; / TBODY&GT;&LT; /表&gt;
      &LT; / DIV&GT;
      &LT;一类=BTN BTN-INFOID =edit14型=按钮的href =#editform&gt;编辑&LT; / A&GT;
      &其中;一类=BTN BTN-危险删除ID =delete_14类型=按钮的href =#editform&GT;删除&所述; / a取代;

    &LT; / DIV&GT;
 

在单击删除按钮,我打电话这是工作的罚款与DB已经显示DIV jQuery的,但对于第二种情况,当我打电话的股利形式AJAX的删除按钮没有充当与案例1

 &LT;脚本类型=文/ JavaScript的&GT;
$(函数()
    {
$(删除)。点击(函数(五){

            变种R =确认(当然想改变现状?)
            {
                的$ id = $(本).parent()ATTR('身份证')。

                警报($ ID);
                    $阿贾克斯({
                            键入:GET,
                            网址:有/ process.php
                            数据:{ID:$ ID,todel:删除},
                            缓存:真正的,
                            异步:假的,
                            错误:函数(){
                                警报('错误');
                            },
                            成功:函数(数据)
                            {
                                警报(数据);
                                // on_success_my_action



                            }
                        });
                    返回false;
            }
        });
});
 
Ajax Jquery

解决方案

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

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

I am submitting a form through ajax and displaying the added field on the same page, along with edit and delete button.. The already added fields are displayed on page load and further addition are displayed via ajax..The delete button (added after ajax from submit ) is not taking any action on click even as on page load delete button.. Am i getting some misconception on jquery and getting it wrong and how can i make it working

The already added field from db are

....
<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>
....

After for submission on ajax, the display values are

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

On click of delete button I am calling the jquery which is working fine with already displayed div from db, but for second case when I am calling the div form ajax the delete button is not functioning as with case 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;
            }
        });
});

解决方案

If you want manage dynamic created content, you have to use .on() : https://api.jquery.com/on/

jQuery only allows to manage content already here when the DOM is loaded.