單擊功能不觸發圖像jQuery

Question

編輯
因此，每個人都非常清楚，我查詢數據庫之后創建該表，然后執行查詢，運行while循環並為我的表充氣。 AKA可以動態，以編程方式動態創建它，但是您希望對其進行標記。 該表在html中不存在，並且在查詢之前不存在。 所以我有錯，因為沒有一開始就解釋。 我在評論中確實提到了它，但我應該更加清楚。

---

我有一個帶有類的圖像，當我單擊它時，我希望它提醒我Job＃下的值，但沒有任何反應。 我創建了一個小提琴以進行演示，並且該小提琴完美地工作了。 我不明白發生了什么。

這是小提琴jsFiddle 。

這是實際的代碼

PHP生成表

echo "<table class='projects_contentTable'>";
echo "<th class='content_th'>" . "" . "</th>";
echo "<th class='content_th'>" . "" . "</th>";
echo "<th class='content_th'>" . "Job #" . "</th>";
echo "<tr>";
echo "<td class='content_td'>" . "<img src='images/edit.png' class='edit_project_record'/>" . "</td>";
echo "<td class='content_td'>" . "<img src='images/view.png' class='view_project_record'/>" . "</td>";    
echo "<td class='content_td'>" . "<a href='#'>" . "16" . "</a>" . "</td>";
echo "</tr>";               
echo "</table>";

jQuery的

$('.view_project_record').click(function() {
    var project_id = $('.projects_contentTable td:nth-child(3) a').text();
    alert(project_id);
});

現在，我意識到在小提琴中，我正在使用段落標簽來模擬圖像。 所以我想，也許這就是原因，可能是愚蠢的。 因此，為了確定，我嘗試將代碼更改為此。

echo "<td class='content_td'>" . "<p class='edit_project_record'>" . "<img src='images/edit.png'/>" . "</p>" . "</td>";
echo "<td class='content_td'>" . "<p class='view_project_record'>" . "<img src='images/view.png'/>" . "</p>" . "</td>";

當我單擊圖像時，它仍然不會觸發。 我知道單擊功能可以在圖片上使用，因為我有另一個功能可以在從jQuery函數中單擊時觸發事件。 為什么這個不起作用？ 是否有關於我不知道的表中圖像的規則？

Answer 1

在文檔准備功能中包裝事件處理程序：

$(document).ready(function(){
    $('.view_project_record').click(function() {
        var project_id = $('.projects_contentTable td:nth-child(3) a').text();
        alert(project_id);
    });
});

它在小提琴中起作用，因為您已將小提琴設置為在代碼運行時運行onload ，但是實際代碼似乎缺少文檔就緒包裝器，因此，當嘗試附加click事件時，該元素很可能不存在。

Answer 2

將內容包裝到$(window).load或$(document).ready

$(window).load(function () {
    $('.view_project_record').click(function () {
        var project_id = $('.projects_contentTable td:nth-child(3) a').text();
        alert(project_id);
    });
});

要么

$(document).ready(function(){
    $('.view_project_record').click(function() {
        var project_id = $('.projects_contentTable td:nth-child(3) a').text();
        alert(project_id);
    });
});