Javascript Ajax ResponseText对象上的jQuery操作

好吧，我对jQuery完全陌生，我可能在这里遗漏了一些明显的东西。。。 我想做的是：

1） 使用JavaScript+Ajax+PHP通过ResponseText从MySQL数据库中提取表（当前正在工作）

2） 使用jQuery对表执行操作（不工作）

代码的第一部分（1）如下所示：

<script>

function displayPeople(String) {

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("People").innerHTML=xmlhttp.responseText;
        }
    }

    var Query = "?String=" + String;
    xmlhttp.open("GET","library/display_people.php"+Query,true);
    xmlhttp.send();
}
window.onload = displayPeople("");

</script>

<input id="Search_People" placeholder="Search People by Name" size="50" onkeyup="displayTable(this.value)">

<div id="People" style="width:900px; height:200px; overflow-y:scroll;">

我怎样才能做到这一点

我对JavaScript/Ajax/PHP的了解非常有限，因此最简单的解决方案是最受欢迎的

---

谢谢

试试这样的东西

$('#People').on('click','.editbtn',function () {
    $(this).html($(this).html() == 'edit' ? 'modify' : 'edit');
});

原因：

您可以正确地修改代码，因为表已经存在于DOM中，所以请单击对其进行事件处理

但它不会对动态添加到DOM中的元素起作用，因为您必须使用jQuery

Delegate

或

on

函数

delegate（）

---

On（）

类为

.editbtn

的按钮尚未在document.ready上的DOM中，因为稍后将加载表内容。ajax请求完成后，您必须将单击事件添加到按钮。

编辑按钮是动态生成的，因此单击事件不会工作，因为它是委托事件，因此请使用

.on

而不是

。单击

而不是

     $(document).ready(function () {
          $('.editbtn').click(function () {
            $(this).html($(this).html() == 'edit' ? 'modify' : 'edit');
          });
     });

这样

   $(document).ready(function () {
         $(document).on.('click','.editbtn',function () {
           $(this).html($(this).html() == 'edit' ? 'modify' : 'edit');
        });
   });

现在，这应该按照您的意愿工作

有关委派事件的更多信息，请参阅：

我已经修改了您的JSFIDLE以显示委派的事件，您可以检查它

现场演示：


快乐编码：）
谢谢您的解释！太好了，这是一个快速解决办法。@Ale：我的荣幸，兄弟：）
     $(document).ready(function () {
          $('.editbtn').click(function () {
            $(this).html($(this).html() == 'edit' ? 'modify' : 'edit');
          });
     });

   $(document).ready(function () {
         $(document).on.('click','.editbtn',function () {
           $(this).html($(this).html() == 'edit' ? 'modify' : 'edit');
        });
   });