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;
            });

这很好用，直到它重新加载。它似乎失去了一个href的句柄，而不是执行程序，它转到gen_details.php

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

我希望我至少解决了一半问题。英语不是我的第一语言，所以并不那么容易。

提前致谢。

Answer 1

Live click event bind event handler to element even after you reload some element. Default click event bind to element when a page load once you reload that element then it also delete event handler of that element.
works on till jquery 1.7 version.

    $('.date a').live('click',(function (e) {
    e.preventDefault()
                    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;
                        },
                    });

                });
//when jQuery > 1.7 then used this method

$('body').on('click' '.date a',function () {
  //call 
 });

Answer 2

尝试此选择器

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

这会将事件委托给其父div。所以它也适用于动态创建的元素。

动态重新加载后的jQuery选择器和$（this）

2 个答案: