重新加载后,onclick 事件失败

onclick event fails after reloading

本文关键字:onclick 事件 失败 新加载 加载      更新时间:2023-09-26

我要完成的:

我有一个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;
    }
}

统计信息.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 事件......

将统计信息div 替换为统计信息后.php 10 秒后,onclick 事件不再工作。

谁能帮我?

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

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

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

尝试在

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