0

さて、私はこの小さなプロジェクトに取り組んでいます。以前にこれを行ったことがあります。テーブルの行をクリックするときにjqueryを使用すると、ID /値が得られますが、phpやajaxでは得られません。だから私はちょっと迷っています。ajaxクエリの前に、テーブルには情報を含むプリセット行があります。クリックするとすべて正常に動作しますが、ドロップダウンメニューからソースを選択すると（ソースは特定の名前を含むすべての行を検索するための名前です）、関連するすべての行がテーブルに読み込まれます。行jqueryをクリックしても、生成されたデータには何も影響しませんが、theadをクリックすると、設定したテストアラートが起動します。HotKeysを使用して、ユーザーがフォーム/ページを操作できるように非表示のポップアップウィンドウを開きます。

jquery-1.7.1.js.js
jqueryhotkeys.js

外部JSファイル：eval.js

var s,
    Joe = {
        settings: {                 
        winWidth:       $(window).width(),
        winHeight:      $(window).height(),
        entriesPopW:    $('#overlay_entries').width(),
        entriesPopH:    $('#overlay_entries').height()
    },
    init: function() {
        s = this.settings;
        this.bindUIActions();
    },
    bindUIActions: function() {                 
        $(document).bind('keydown.f7',function (evt){
            //View Previous Entries
            $("#overlay_entries").fadeIn(1000);Joe.entries();Joe.loadEntries();
            $("#assList").change(function(e){
                assSelect = $("#assList").val();
                Joe.entryTable(assSelect);
            });
            $("#table-2 tr").click(function() {
                alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
            });
            $(".f7button").click(function(x){$("#overlay_entries").fadeOut(500);return false;});
            return false; 
        });             
    },
    //shows or hides hidden window
    entries: function(){if(!$("#overlay_entries").is(':visible')){return;} $("#overlay_entries").css({  left: (s.entriesPopW/2)+50 ,top: (s.entriesPopH/2)+50,position:'fixed'   }); },
    //populates table after drop down menu selection
    entryTable: function(a){
        var jac = a;
        $.ajax({
            type: "GET",
            url: "joe_functions.php?select="+jac,
            error: function() {alert('error');},
            success: function (data) {
                $("#table-2 tbody").ajaxComplete(function () {
                    $(this).html(data);                    
                });
            }
        }); 
    },
    //this loads the dropdown menu with names
    loadEntries: function(){
        $.ajax({
            type: "GET",
            url: "joe_functions.php?content=dropdown",
            error: function() {alert('error');},
            success: function (data) {$("#assList").ajaxComplete(function () {$(this).html(data);});}
        });
    }
};

HTMLファイル

<head>
    <title>The Eval Form</title>
    <script src="jquery-1.7.1.js"></script>
    <script src="jquery.hotkeys.js"></script>
    <script type="text/javascript" src="eval.js"></script>
    <script>
        (function() {Joe.init();})();
    </script>
<style>
</style>

</head>

<body>
<div id="overlay_entries" style="display:none">
    <h2> Previous Entries:</h2>
    <center>
        <select name="" id="assList"></select><br/><br/>    
        <table id="table-2">
            <thead>
                <th class="entryColOne">Associate</th>
                <th class="entryColTwo">Eval Date</th>
                <th class="entryColThree">Score</th>
                <th class="entryColFour">Overall</th>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Smith</td>
                    <td>johnsmith@example.com</td>
                    <td>http://www.example.com</td>
                </tr>
            </tbody>
        </table>
        <br/>
        <input type="submit" class="f7button" value=""/>
    </center>
</div>
</body>
</html>


PHPファイル： joe_functions.php

<?php
require 'db_connect.php';

if(isset($_GET['select']) && !empty($_GET['select'])){
    $passed = $_GET['select'];
    //$test = '<tr><td colspan=4">'.$passed.'</td></tr>';
    $sqlb   = 'SELECT * FROM joe_eval WHERE wmid ='.$passed.' ORDER BY id';
    $queryb     = mysql_query($sqlb);
    $numb   = mysql_num_rows($queryb);

    $tableData = '';
    $ib = 0;
    if(!$queryb){
        $query_error = '<tr><td colspan="4">MySQL Error: '.mysql_error().'</td></tr>';
        $tableData .= $query_error;
    }else{
        while($ib <$numb){
            $wmid   = mysql_result($queryb,$ib,'wmid');
            $person     = mysql_result($queryb,$ib,'employee'); 
            $id = mysql_result($queryb,$ib,'id');
            $date       = mysql_result($queryb,$ib,'date');
            $score      = (mysql_result($queryb,$ib,'dm1')+mysql_result($queryb,$ib,'dm2')+mysql_result($queryb,$ib,'dm3')+mysql_result($queryb,$ib,'dm4')+mysql_result($queryb,$ib,'dm5')+mysql_result($queryb,$ib,'dm6')+mysql_result($queryb,$ib,'dm7'))/7;
            $numFormat = number_format($score, 2, '.', '');
            $overall    =   '';

            if ($numFormat >= 1 && $numFormat < 1.6) {$overall = 'Below Needs';
            }else if ($numFormat >= 1.6 && $numFormat < 2.7) {$overall = 'Improvment Needed';
            }else if ($numFormat >= 2.7 && $numFormat < 3.6) {$overall = 'Good Performer';
            }else if ($numFormat >= 3.6 && $numFormat < 4.6) {$overall = 'Exceeds Expectations';
            }else if ($numFormat >= 4.6 && $numFormat <= 5) {$overall = 'Top Dog';}

                // HERE IS WERE THE ROW ID IS BEING INSERTED
                // WHICH WILL LATER BE USED TO LOAD FORM
                $tableData .= '<tr id="'.$id.'"><td>'.$person.'</td><td>'.$date.'</td><td class="score">'.$numFormat.'</td><td>'.$overall.'</td></tr>';
            $ib++;
        }
    }
    // Send back the tbody HTM
    echo $tableData;
}else{
    $tableData .= '<tr><td colspan="4"><b>YOU MUST SELECT A NAME FROM THE LIST ABOVE!</b></td></tr>';
}
?>

したがって、JSファイルにエラーがあるのか​​、それともajaxリクエストに送信されるデータと一緒に生成するPHPファイルに何かを追加する必要があるのか​​わかりません。

4

2 に答える 2

0

あなたができることの1つは、動的に生成されたデータにイベントハンドラーをバインドするために使用されるjquery .on（）を使用することです。あなたの場合、ajax呼び出しから受信したデータです。

だから代わりに

$("#table-2 tr").click(function() {
      alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

あなたはこのようなことをすることができます

$("#table-2 tr").on("click", function() {
      alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

それが役立つかどうか教えてください。

jquery .on() hereについても読むことができます

于 2013-02-08T05:53:13.140 に答える
0

肩をタップして別の方向を見るようにしてくれたMandeep Jainのおかげで、これはすばやく簡単に修正できました。

初挑戦：

$("#table-2 tbody tr").click(function() {
     alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

2 回目の試行:

$("#table-2 tbody tr").on("click", function() {
     alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

3 番目と最後の WORKING 修正:

$("#table-2 tbody tr").live("click", function() {
     alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

JQuery ドキュメント:

jQuery 1.7 以降、.live() メソッドは非推奨になりました。.on() を使用して、イベント ハンドラーをアタッチします。古いバージョンの jQuery のユーザーは、.live() よりも .delegate() を使用する必要があります。

このメソッドは、デリゲートされたイベント ハンドラーをページのドキュメント要素にアタッチする手段を提供します。これにより、コンテンツがページに動的に追加されるときのイベント ハンドラーの使用が簡素化されます。

于 2013-02-08T06:08:37.613 に答える