0

私が達成しようとしていること:

ユーザーの統計を追跡する div があります。ユーザーをクリックすると、div の内容が ajax リクエストのエコー ページによってユーザーの詳細に置き換えられます。10 秒ごとに div が ajax を使用して更新されるため、古いコンテンツであるすべてのユーザーの統計が再度表示されます。

私の問題:ページをロードすると、ユーザーをクリックするとonclickイベントがうまく機能します。詳細が読み込まれます。約 10 秒後、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 div を stats.php に置き換えた後、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 に答える