Php jQuery.on（'；单击'；）即使在动态加载的页面上也是如此

我的网页上有一个故事上传系统，它将故事上传到指定的文件夹中，并从中将其内容列在网页上。我分割了文本，因此只显示300个字符的文本，当用户单击它时，其余的显示出来

这一个列出了它：

<?php foreach($dataArray as $data) { ?>
    <div class="visible">
        <?php echo $data[0] . "<br/><center><a href='#' class='story_show'>Teljes Történet</a></center>";  ?>
    </div>
    <div class="hidden">
        <?php echo $data[1]; ?>
    </div>
<?php } ?>

此页面（

torteneek.php

）通过Ajax加载到主页（

blog.php

）。我在

blog.php

中包含了jQuery，如下所示：

<link href='http://fonts.googleapis.com/css?family=Niconne&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="../css/stilus.css"/>
        <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../js/tinybox.js"></script>
        <script type="text/javascript" src="../js/ajax.js"></script>
        <link href="../css/lightbox.css" rel="stylesheet" />
        <script src="../js/lightbox.js"></script>
                <script src="../js/story.js"></script>

---

Story.js

是我正在使用的脚本文件。

如果我正确理解了您的问题，那么您需要利用事件委派，方法是更改

。单击（）

调用以调用

。on（）

调用，并传递一个与DOM中始终存在的祖先元素匹配的选择器：

$('#someAncestor').on('click', '.visible', function(){
    $(this).next('.hidden').css('display', 'inline');
});

请注意事件处理程序函数中使用

this

和

.next（）

的更改。当您单击任何

.visible

元素时，它当前的显示方式将显示所有

.hidden

元素

---

#some祖先

必须是执行代码时DOM中存在的元素。这是因为大多数DOM事件都是通过树从它们发起的元素（目标）冒泡出来的。您可以在任何祖先元素捕获该事件。

@trisztann-现在有什么问题？会发生什么？控制台中有错误吗？我正在使用NetBeans IDE，它没有显示任何语法错误（它也检查jQuery），控制台中也没有任何错误。我正在处理的页面是Ajax的，可能是干扰？我单击链接或任何元素，.hidden div不会出现。基本上就是这样。@trisztann-确保jQuery包装在一个DOM就绪的事件处理程序中，例如

$（function（）{/*code here*/}）我将可视div设置为链接，单击它将显示隐藏的div。。。这是jQuery:$（'#祖先'）.on（'click'，'.visible'，function（）{$（this）.next（'.hidden'）.css（'display'，'inline'）；}）；
$('#someAncestor').on('click', '.visible', function(){
    $(this).next('.hidden').css('display', 'inline');
});