0

好的，我一直在做这个小项目，我以前做过；单击表行时使用 jquery 会给出 ID/值，但不能使用 php 或 ajax。所以我有点迷路了，在 ajax 查询之前，表中有一个包含信息的预设行。当我单击它时，一切正常，但是在从下拉菜单中选择一个源之后（源是一个名称，用于搜索包含某个名称的所有行）并将所有相关行加载到表中。单击一行 jquery 对生成的数据没有任何作用，但是当单击 thead 时，它会启动我设置的测试警报。我正在使用热键打开隐藏的弹出窗口，以便用户与表单/页面进行交互。

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 文件中的错误，或者我是否应该在 PHP 文件中添加一些内容以生成与发送到 ajax 请求的数据一起生成的内容。

4

2 回答 2

0

您可以做的一件事是使用 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() 的信息

于 2013-02-08T05:53:13.140 回答
0

多亏了Mandeep Jain拍拍肩膀，让他朝不同的方向看，这是一个快速而简单的解决方法。

第一次尝试：

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

第二次尝试：

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

第三个也是最后一个工作修复：

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

jQuery 文档：

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。

此方法提供了一种将委托事件处理程序附加到页面的文档元素的方法，这在将内容动态添加到页面时简化了事件处理程序的使用。

于 2013-02-08T06:08:37.613 回答