onclick event fails after reloading

Question

What I'm trying to accomplish:

I'm having a div which keeps track of stats of users. When clicked on a user, the contents of the div are replaced by details of a users by an ajax request echoed page. Every 10 seconds, the div will refresh using ajax and therefore the old contents, the stats of ALL users are displayed again.

My problem: Upon loading the page, the onclick event works great, when clicked on a user; the details will load. After about 10 seconds, the div contents are refreshed by the old ALL user stats.

So far so good, except for the fact that the onclick event does not work on the new contents....

Here is my code:

Javascript:

var x;
var namen;
window.onload = function(){
    x = true;
    $("submitnieuw").observe('click', addturf);
    $("submitdelete").observe('click', verwijderturf);
    setInterval(function (){
        if(x === true){
            alert("a");
            x = $('stats').getElementsByTagName('tr');
            jQuery("#stats").load("stats.php");
            jQuery("#recent").load("vandaag.php");
            namen = $('stats').getElementsByTagName('tr');
            for(var i = 1; i < namen.length; i++){  
                namen[i].observe('click', select);
            }   
        }
    }, 10000);
    namen = $('stats').getElementsByTagName('tr');
    for(var i = 1; i < namen.length; i++){  
        namen[i].observe('click', select);
    }   
};

function select(naam){
    //highlight the selected list element
    var name = naam.findElement('tr').id;
    jQuery.ajax('details.php',{
        data: {
            'Naam': name,
            'door': $("door2").value
        },
        type: 'post', 
        success: function(data){
            $("stats").innerHTML = data;
        },
        error: ajaxFailure
    });
}

function detail(ajax){
    var text = ajax.responseText;
    alert(text);
    L = text;
}

function verwijderturf() {
    var naam = $("naam").value;
    $("naamnieuw").value = "";
    $("naam").value = "";
    $("redennieuw").value = "";
    jQuery.ajax('server.php',{
        data: {
            'mode': 'verwijderturf',
            'naam': naam,
            'door': $("door2").value
        },
        type: 'post', 
        success: update,
        error: ajaxFailure
    });
}


function addturf() {
    var naam = $("naamnieuw").value;
    var reden = $("redennieuw").value;
    $("naamnieuw").value = "";
    $("naam").value = "";
    $("redennieuw").value = "";
    jQuery.ajax('server.php',{
        data: {
            'mode': 'addturf',
            'naam': naam,
            'door': $("door2").value,
            'reden': reden
        },
        type: 'post', 
        success: update,
        error: ajaxFailure
    });
}

function update(ajax){
    jQuery("#stats").load("stats.php");
    jQuery("#recent").load("vandaag.php");
}


function ajaxFailure(ajax, exception) {
    alert("Error making Ajax request:" + 
        "\n\nServer status:\n" + ajax.status + " " + ajax.statusText + 
        "\n\nServer response text:\n" + ajax.responseText);
    if (exception) {
        throw exception;
    }
}

stats.php (The contents which are loaded again):

<?php
    include_once("db.php"); 
?>


<?php
    $names = mysql_query("SELECT Naam From users");
    $feedData = '';
    $feedData .= "<fieldset>";
    $feedData .= "<legend>Turfjesteller</legend>";
    $feedData .= "<table border=0>";
    $feedData .= "<tr>";
    $feedData .= "<td>Naam</td>";
    $feedData .= "<td>Aantal</td>";
    $feedData .= "<td>Gedaan</td>";
    $feedData .= "<td>Resterend</td>";
    $feedData .= "</tr>";
    while($r = mysql_fetch_array($names)){
        $feedData .= "<tr id=".$r['Naam'].">";
        $feedData .="<td>" . $r['Naam'] . "</td>";

        $sql="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Adtje'";
        $result=mysql_query($sql);
        $count=mysql_num_rows($result); //count = adtjes
        $sql2="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Turfje'";
        $result2=mysql_query($sql2);
        $count2=mysql_num_rows($result2); //count2 = turfje     

        $feedData .="<td>" . $count2 . "</td>";
        $feedData .="<td>" . $count . "</td>";
        $feedData .="<td>" . ($count2-$count) ."</td>";     
        $feedData .="</tr>";
    } 
    $feedData .="</table>";
    $feedData .="</fieldset>";
    echo($feedData);
?>

As said before, the page looks exactelly the same, but the onclick event does not work anymore.

The div contents are EXACTELLY the same, so I have no clue what is wrong.

namen = $('stats').getElementsByTagName('tr');
for(var i = 1; i < namen.length; i++){  
     namen[i].observe('click', select);
}

Should get all the table rows and add onclick events to them again...

After replacing the stats div with the stats.php after 10 seconds, the onclick event is not working anymore..

Can anyone help me out please?

Answer 1

You can set up the initial click handler by using jQuery's on() method:

$(document).on('click', '<div selector>', select);

This will ensure that the click events are still captured on new elements.

Answer 2

尝试在每个ajax响应后将onclick重新绑定到所需的div