Question

好吧，我对jQuery完全不熟悉，我可能会遗漏一些明显的东西...... 我想做的是：

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

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

当用户在输入字段中键入名称时，表会动态更新。 PHP文件组装Query并返回：

$display_string = "<table>";
while($row = mysqli_fetch_array($Results)){
    $display_string .= "<tr>";
    $display_string .= "<td>" . $row['FirstName'] . "</td>";
    $display_string .= "<td>" . $row['LastName'] . "</td>";
    $display_string .= "<td>" . "<button class='editbtn'>edit</button>" . "</td>";
    $display_string .= "</tr>";
}
$display_string .= "</table>";

echo $display_string;

NOW ，第（2）部分，我想在表条目上使用jQuery执行一些操作（最终目标是：http://www.9lessons.info/2011/04/live-table-edit-delete-with-pagination.html）。

首先，我将这个jQuery脚本添加到从另一个教程（http://jsfiddle.net/tXS6w/）中获取的.html中，该教程在任何“静态”表上都很有效，但在上面的表格中没有任何效果！也就是说，如果我点击按钮应该改变标签......没有任何反应。

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

我该如何做到这一点？

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

感谢!!!

Answer 1

尝试这样的事情

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

原因：

你正确地编写代码，因为表已经存在于DOM中，因此单击事件就可以了。

但它不适用于动态添加到DOM的元素，因为你必须使用jQuery Delegate或On函数。

delegate() http://api.jquery.com/on/

On() http://api.jquery.com/delegate/

Answer 2

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

Answer 3

edit按钮是动态生成的，因此点击事件不会起作用，因为它是委派事件，因此请使用.on代替.click

而不是

     $(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');
        });
   });

现在这应该按照您的意愿运作。

有关委派活动的更多信息，请参阅：http://api.jquery.com/on/

我修改了你的jsfiddle以展示委派的事件，你可以检查它。

现场演示：

http://jsfiddle.net/dreamweiver/tXS6w/291/

快乐编码：）

对Ajax ResponseText对象的jQuery操作

3 个答案: