JQuery無響應點擊功能

Question

我正在構建Chrome擴展。我有一個簡單的html文件（只包含一個div，一張圖片和一張空表）。然後，我回顯一些表格行和我從數據庫中讀取的數據，因爲這樣做有效，所以我擺脫了一些細節。我發送ajax請求來檢索echo-ed表格行和數據，並將它們附加到前面提到的html文件中的表格中。

這是php文件的外觀，與「東西」

//a few of these: 
echo 
"<tr> 
<td> Something </td>   
<td> Something </td> 
<td> Something </td> 
</tr>"; 

然後我有一個處理的表的內容追加到表中，也應該處理任何表中的jQuery腳本替換數據行點擊。它發送該ajax請求並附加表格數據就好了。這是該腳本文件看起來像

$(document).ready(function() { 

        $.urlParam = function(name){ 
        var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); 
        if (results==null){ 
         return null; 
        } 
        else{ 
         return results[1] || 0; 
        } 
       } 

       $usern = $.urlParam('user'); 
       var div = document.getElementById('welcome'); 
       div.innerHTML = "Pozdravljeni, <a href='https://www.google.si' id='imeUser'><span>" + $usern + "</span></a>! <a href='dodajGeslo.html'><span id='dodajGeslo'> Dodaj Geslo </span></a>"; 
       $.ajax({ 
        url: 'http://passvault.000webhostapp.com/qryGesla.php', 
        data: {user:$usern}, 
        type: "GET", 
        success: function(data) { 
         $("#gesla").append(data); 
         $("#load").css("display", "none"); 
        } 
       }); 

       $('tr').click(function() { 
        alert('test'); 
       }); 

}); 

正如你可以在我對每Tr點擊功能頁面底部看到，只有報警，然而當我點擊它沒有行工作。有人可以幫助我，我不知道我的錯誤

Answer 1

你可能想要使用委派的事件。點擊處理程序只會在頁面加載時存在的<tr>上激活。添加事件處理程序的代碼在填充表格之前運行（它看起來像通過ajax執行）。

您需要在頁面加載時已經存在的元素上設置事件，然後告訴它將事件委派給事件觸發時存在的任何子元素（您選擇的）。我將假定「gesla」元素滿足這個需求，因爲您將數據附加到它，但是如果不是，請選擇另一個更高級的DOM元素（如果沒有其他適用的話，您可以使用document ，但爲了表現，你應該選擇最近的可用父母）。

$("#gesla").on("click", "tr", function() { 
    alert("test"); 
}); 

欲瞭解更多信息請看這裏：http://api.jquery.com/on/（題爲「直接和委託的事件」一節）。