0

我要完成的工作:

我有一个 div 来跟踪用户的统计信息。当点击用户时,div 的内容会被一个 ajax 请求回显页面替换为用户的详细信息。每 10 秒,div 将使用 ajax 刷新,因此旧内容,所有用户的统计信息再次显示。

我的问题:加载页面后,点击用户时,onclick 事件效果很好;详细信息将加载。大约 10 秒后,旧的 ALL 用户统计信息会刷新 div 内容。

到目前为止一切顺利,除了 onclick 事件对新内容不起作用......

这是我的代码:

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(再次加载的内容):

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

如前所述,页面看起来完全一样,但 onclick 事件不再起作用。

div 内容完全相同,所以我不知道出了什么问题。

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

应该获取所有表行并再次向它们添加 onclick 事件...

在 10 秒后用 stats.php 替换 stats div 后,onclick 事件不再起作用..

谁能帮帮我?

4

2 回答 2

1

您可以使用 jQuery 的 on() 方法设置初始点击处理程序:

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

这将确保仍然在新元素上捕获点击事件。

于 2012-05-25T16:45:50.860 回答
0

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

于 2012-05-25T16:40:56.683 回答