动态加载页面上的jQuery .on('click')事件

时间:2012-07-04 10:29:18

标签: php jquery

我在我的网页上有一个故事上传系统,它在指定的文件夹中上传故事,并从中将其内容列入网页。我拆分了文本,因此只显示了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 } ?>

这是我的jQuery:

$('.hidden').css('display', 'none');
$('.visible').click(function () {

    $('.hidden').css('display', 'inline');
});

此页面(tortenetek.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是我正在使用的脚本文件。

1 个答案:

答案 0 :(得分:1)

如果我已正确理解您的问题,那么您需要利用事件委派,将.click()调用更改为.on()调用,并传递与祖先元素相匹配的选择器在DOM中:

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

注意事件处理函数的更改以使用this.next()。当您点击任何 .hidden元素时,您当前拥有它的方式将显示所有 .visible元素。

#someAncestor需要是执行代码时DOM中存在的元素。这是有效的,因为大多数DOM事件从它们所源自的元素(目标)通过树形成。您可以在任何祖先元素中捕获该事件。