未注册 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
});