Question

我正在努力实现的目标：

我有一个跟踪用户统计数据的div。单击用户时，div的内容将由ajax请求回显页面的用户详细信息替换。每隔10秒，div将使用ajax刷新，因此旧内容会再次显示所有用户的统计信息。

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

到目前为止一切顺利，除了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事件不再起作用..

有人可以帮帮我吗？

Answer 1

您可以使用jQuery的on（）方法设置初始点击处理程序：

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

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

Answer 2

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

重新加载后，onclick事件失败

2 个答案: