jQuery對Ajax ResponseText對象的操作

Question

好吧，我對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;">

當用戶在輸入字段中輸入名稱時，該表將動態更新。 PHP文件組裝查詢並返回：

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

現在 ，第（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中已經存在表，因此可以對其進行click事件。

但是它不適用於動態添加到DOM的元素，因為您必須使用jQuery Delegate或On函數。

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

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

Answer 2

類.editbtn的按鈕尚不在document.ready的DOM中，因為您稍后會加載表內容。 在ajax請求完成之后，您必須將click事件添加到按鈕中。

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/

快樂編碼:)