未注冊 JQuery 單擊事件<ul>從 PHP 腳本返回

Question

我有一個包含 2 個div的 HTML 頁面。 在它的第一個div使用 AJAX 從 PHP 腳本加載頁面后立即填充ul 。 第二個div有一個靜態ul 。 現在我希望在每個ul上的兩個div ，單擊事件都應該起作用。 即，應該出現一個警報，說它被點擊了。

這是PHP代碼：

require_once "../../resources/script/dbconfig.php";

$query = "SELECT * FROM job_case";
$rslt = mysqli_query($link,$query);     

echo "<ul>";

for($i=0;$i<mysqli_num_rows($rslt);$i++)
{
$job = mysqli_fetch_row($rslt);
echo "<li class=\"jobTitle\" id=jon".$job[0].">".$job[1]."</li>";           
}

echo "</ul>";

HTML頁面：

<div class="jobCase" id="govtJobCase">
    <ul>
        <li class="jobTitle" id="jobId">Item A</li>
        <li class="jobTitle" id="jobId">Item B</li>         
    </ul>
</div>        
<div class="jobCase">
    <ul>
         <li class="jobTitle" id="jobId">Item A</li>
         <li class="jobTitle" id="jobId">Item B</li>
     </ul>        
 </div>

我的問題是，在從 PHP 發布的第一個div ，沒有事件工作，但在其他靜態ul標記事件中工作正常。

Answer 1

您應該向我們提供您的 jQuery 腳本。 但我可以幫助你也許：

對於事件，您不應該使用on()而最好堅持使用delegate()因為它允許將事件附加到初始頁面加載后尚未創建的 DOM 對象。 例如，如果您的 ajax 請求返回<uL class='sample'></ul>您可以執行以下操作：

$(document).delegate(".sample", "click", function(){
alert("You have clicked on a newly created <ul>");
});

Answer 2

如果您將事件處理程序放在兩個 div 周圍的元素上，您可以隨心所欲地更新元素的內容，但事件處理程序保持原樣。

<div class="container">
    <!-- the contents of this div is populated using AJAX -->
</div>

javascript:

$('.container').on('click', function () {
    // clicks will arrive here even when they originate from ajax loaded content
});