Question

好的，所以我一直在做这个小项目，我以前做过这个;单击表行时使用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文件中的错误，或者我是否应该在PHP文件中添加一些内容以及发送到ajax请求的数据。

Answer 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

的信息

Answer 2

感谢 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 Documentation：

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）来   附加事件处理程序。旧版jQuery的用户应该使用   .delegate（）优先于.live（）。

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

如何从动态ajax生成的表中获取ROW id（PHP，JQuery，MySQL）

2 个答案:

首先尝试：

第二次尝试：

第三次和最后的工作修复：