javascript - 动态重新加载后的 jQuery 选择器和 $(this)

Question

我需要一些帮助。我每 5 秒加载一个 div 中的条目列表。每个条目都是一个 div 并具有唯一的 ID。像这样:

<div class="entry">
<div class="textbox">
    <p class="entry-text">
        <?php echo $text;?>
    </p>
</div>
<div class="infobox">
    <p class="date"><a #<?php echo $id;?> id="<?php echo $id;?>" href="gen_details.php?id=<?php echo $id;?>"><?php echo $t;?></a> </p>
    <p class="ip"><?php echo $ip;?></p>
</div>

正如我所说，这些每 5 秒加载一次。我为每个条目添加一个详细信息页面，如下:

                $('.date a').click(function () {
                var dataString = 'id=' + $(this).attr("id"); 
                //alert(dataString);
                $.ajax({
                    type: "POST",
                    url: "gen_details.php",
                    data: dataString,
                    success: function(data) {
                        $("#content").hide().fadeOut('fast');
                        $("#content").html(data).show('fast');
                        refresh = 0;
                    },
                });
                return false;
            });

这工作得很好，直到它重新加载。它似乎丢失了 a href 的句柄，而不是执行该过程，而是转到 gen_details.php

我尝试使用 .on() 但我不知道如何使用 .on() 获取条目的 ID，因为我无法使用 $(this) (afaik)。

我希望我至少解释了我的问题一半。英语不是我的母语，所以这并不容易。

提前致谢。

Answer 1

试试这个选择器

$('div').on('click', '.date a', function () {

这会将事件委托(delegate)给其父 div。因此它也应该适用于动态创建的元素。