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

Question

I need some help. I load a list of entries in a div every 5 seconds. Each entry is a div and has a unique ID. Like this:

<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>

These, as I said are loaded each 5 seconds. I'm adding a details page for every entry, with this:

                $('.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;
            });

This works perfectly fine, until it reloads. It seems to lose the handle for the a href and instead of doing the procedure it goes to gen_details.php

I have tried to use .on() but I don't know how would I get the ID of the entry using .on(), as I cant use $(this) (afaik).

I hope I explained my problem at least half-well. English is not my first language so it wasn't that easy.

Thanks in advance.

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

Try this selector

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

This will delegate the event to its parent div. So it should work for dynamically created elements as well.