Question

我有一个显示记录表的php页面，在其中一列中我有一个“打印”按钮：

<td>
    <input type="button" class="btn-print" value="Print" id="printrec">
</td>

我将javascript文件添加到php：

<script type="text/javascript" src="js/logic.js"></script>

logic.js中的函数：

$(document).ready(function() {
    // Print selected record's entry form
    $('#printrec').click(function() {
        alert("Print btn pressed");
    });
});

页面上的其他按钮工作，按ID调用相应的js函数，但单击“打印”时没有任何反应。有什么想法吗？

修改 searchEntries.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Adobe GoLive" />
    <title>Contest Entry Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/logic.js"></script>
</head>
<body>
<form>
<input type="text" id="entry-number" class="form-control" placeholder="Entry # (separate multiple entries with commas)" value="" name="con-year" />
<input type="button" id="formsearch" class="btn btn-default" value="Search" />
</form>
        <table id="show-entries">
        <tr class="tbhead">
            <th> Select </th>
            <th style="display:none"> ID </th>
            <th> Entry # </th>
            <th> Barcode </th>
            <th> Entrant Name </th>
            <th> Title of Entry </th>
            <th> Category </th>
            <th> Paid </th>
            <th> Date Paid </th>
            <th> Date Created </th>
            <th> Date Last Updated </th>
            <th> Last Updated By </th>
            <th> Print </th>
        </tr>
        </table>
</body>
</html>

searchentries.php

<?php
.
.
.
$stmt = $conn->prepare($sql);
    $stmt->execute($params);

    if ($stmt->rowCount() > 0) {
        // Loop through resultset and add to JSON object
        $stmt->setFetchMode(PDO::FETCH_ASSOC);
        while($row = $stmt->fetch()) {
            $json[] = $row;
        }
        // Return encoded JSON object to logic.js
        echo json_encode($json);
    } else {
        echo "NoResults";
    }

logic.js

$(document).ready(function() {

    var check="checklist";
    var unCheck ="unchecked-list";
    var cantCheck ="cantCheck";

    //select all button 
    $('#selectall').click(function() {
        if(this.checked) {
            //checked here
            $('#show-entries .unchecked-list').prop('checked', true);
            $('#show-entries .unchecked-list').attr('class', 'checklist');   
        }
        else {
            //unchecked here
            $('#show-entries .checklist').prop('checked', false);
            $('#show-entries .checklist').attr('class', 'unchecked-list');
        }
    });

    //checking checkbox
    $(document).on('change','.checklist, .unchecked-list',function() {
        if(this.checked) {
            //checked here
            $(this).attr('class', 'checklist');
        }
        else {
             //unchecked here
             $(this).attr('class', 'unchecked-list');
        }
    });

    $('#formsearch').click(function() {

        //getting values of text boxes
        var  contestYear= $('#contest-year').val();
        var  entryNumber= $('#entry-number').val();
        var  barCode= $('#barcode').val();
        var  firstName= $('#first-name').val();
        var  lastName= $('#last-name').val();
        var  title= $('#title-name').val();

        //remvoing previous row 
        $('.child').remove();

        $.ajax({
                type: "POST",
                url: "php/searchreceive.php",
                data:{"c_year": contestYear, "e_number": entryNumber, "bCode":barCode, "fName":firstName, "lName": lastName, "title":title} 

        }).done(function(status) {
            status=status.trim();
            if(status=="NoResults") {
                alert("No records found - please try again.");
            }
            else {
                var result = JSON.parse(status);
                var p;
                var paidOp;

                for(var i=0; i<result.length; i++) {
                    // Loop through each record in 'status'

                    //getting date paid
                    var datePaid =result[i]["DatePaid"];
                    if(datePaid==null) {
                        datePaid = "";
                    }

                    //getting yes no for paid
                    p = result[i]["Paid"].trim();
                    if(p==1) {
                        paidOp="Yes";
                    }
                    else {
                        paidOp="";
                        //datePaid="";
                    }

                    //getting date created
                    var dateCreated =result[i]["DateCreated"];
                    if(dateCreated==null) {
                        dateCreated = ""; 
                    }

                    //getting date last updated
                    var dateUpdated =result[i]["DateLastUpdated"];
                    if(dateUpdated==null) {
                        dateUpdated = "";      
                    }

                    //getting last updated by
                    var updatedBy =result[i]["LastUpdatedBy"];
                    switch(updatedBy) {
                        case "wf_boxoffice":
                            updatedBy = "Box Office";
                            break;
                        case "wf_anon":
                            updatedBy = "Entrant";
                    }

                    $('#show-entries').append('<tr class="child"><td ><input type="checkbox" class='+unCheck+'  id='+result[i]["ID"]+'></td>\
                        <td style="display:none">'+result[i]["ID"]+'</td>\
                        <td>'+result[i]["Entry_Form_Number"]+'</td>\
                        <td>'+result[i]["Barcode_Text"]+'</td>\
                        <td>'+result[i]["Entrant_Name"]+'</td>\
                        <td>'+result[i]["Model_Name"]+'</td>\
                        <td>'+result[i]["Category_Name"]+'</td>\
                        <td>'+paidOp+'</td>\
                        <td>'+datePaid+'</td>\
                        <td>'+dateCreated+'</td>\
                        <td>'+dateUpdated+'</td>\
                        <td>'+updatedBy+'</td>\
                        <td><input type="button" class="btn-print"  value="Print" id="printrec"/></td>\n\
                    </tr>');

                    //checking paid or not  and disabling checkbox if FALSE
                    if(result[i]["Paid"]==1) {
                        //disabling unpaid checkboxes
                        $('#'+result[i]["ID"]).prop('disabled', true);

                        //changing classs name of unchecked
                        $('#'+result[i]["ID"]).attr('class', 'cantCheck');
                    }
                }
            }
        }); 
    });

    // Proceed button click
    $('#paid').click(function() {
        //getting ids of checkboxes
        var idArray = [];
        $('.checklist').each(function () {
            idArray.push(this.id);
        });

        if(idArray.length>0) {
            //call ajax for updating rows
            $.ajax({
                    type: "POST",
                    url: "php/updatepaid.php",
                    data:{idArray:idArray} 

            }).done(function(status) {
                status=status.trim();
                alert(status);
                window.location.href = '../index.php';
            });
        }
        else {
            alert("No row selected");
        }
    });

    // Reset all data
    $('#formreset').click(function() {
        //remvoing table rows 
        $('.child').remove();
    });

    // Print selected record's entry form
    $('#printrec').click(function() {
        alert("Print btn pressed");
    });
});

编辑＃2 - logic.js

$(document).ready(function() {

    setTimeout(function(){ 
    addClickHandlers('.printrec');
    }, 1000);

    var check="checklist";
    var unCheck ="unchecked-list";
    var cantCheck ="cantCheck";

    //select all button 
    $('#selectall').click(function() {
        if(this.checked) {
            //checked here
            $('#show-entries .unchecked-list').prop('checked', true);
            $('#show-entries .unchecked-list').attr('class', 'checklist');   
        }
        else {
            //unchecked here
            $('#show-entries .checklist').prop('checked', false);
            $('#show-entries .checklist').attr('class', 'unchecked-list');
        }
    });

    //checking checkbox
    $(document).on('change','.checklist, .unchecked-list',function() {
        if(this.checked) {
            //checked here
            $(this).attr('class', 'checklist');
        }
        else {
             //unchecked here
             $(this).attr('class', 'unchecked-list');
        }
    });

    $('#formsearch').click(function() {

        //getting values of text boxes
        var  contestYear= $('#contest-year').val();
        var  entryNumber= $('#entry-number').val();
        var  barCode= $('#barcode').val();
        var  firstName= $('#first-name').val();
        var  lastName= $('#last-name').val();
        var  title= $('#title-name').val();

        //remvoing previous row 
        $('.child').remove();

        $.ajax({
                type: "POST",
                url: "php/searchreceive.php",
                data:{"c_year": contestYear, "e_number": entryNumber, "bCode":barCode, "fName":firstName, "lName": lastName, "title":title} 

        }).done(function(status) {
            status=status.trim();
            if(status=="NoResults") {
                alert("No records found - please try again.");
            }
            else {
                var result = JSON.parse(status);
                var p;
                var paidOp;

                for(var i=0; i<result.length; i++) {
                    // Loop through each record in 'status'

                    //getting date paid
                    var datePaid =result[i]["DatePaid"];
                    if(datePaid==null) {
                        datePaid = "";
                    }

                    //getting yes no for paid
                    p = result[i]["Paid"].trim();
                    if(p==1) {
                        paidOp="Yes";
                    }
                    else {
                        paidOp="";
                        //datePaid="";
                    }

                    //getting date created
                    var dateCreated =result[i]["DateCreated"];
                    if(dateCreated==null) {
                        dateCreated = ""; 
                    }

                    //getting date last updated
                    var dateUpdated =result[i]["DateLastUpdated"];
                    if(dateUpdated==null) {
                        dateUpdated = "";      
                    }

                    //getting last updated by
                    var updatedBy =result[i]["LastUpdatedBy"];
                    switch(updatedBy) {
                        case "wf_boxoffice":
                            updatedBy = "Box Office";
                            break;
                        case "wf_anon":
                            updatedBy = "Entrant";
                    }

                    $('#show-entries').append('<tr class="child"><td ><input type="checkbox" class='+unCheck+'  id='+result[i]["ID"]+'></td>\
                        <td style="display:none">'+result[i]["ID"]+'</td>\
                        <td>'+result[i]["Entry_Form_Number"]+'</td>\
                        <td>'+result[i]["Barcode_Text"]+'</td>\
                        <td>'+result[i]["Entrant_Name"]+'</td>\
                        <td>'+result[i]["Model_Name"]+'</td>\
                        <td>'+result[i]["Category_Name"]+'</td>\
                        <td>'+paidOp+'</td>\
                        <td>'+datePaid+'</td>\
                        <td>'+dateCreated+'</td>\
                        <td>'+dateUpdated+'</td>\
                        <td>'+updatedBy+'</td>\
                        <td><input type="button" class="btn-print printrec" value="Print"/></td>\n\
                    </tr>');

                    //checking paid or not  and disabling checkbox if FALSE
                    if(result[i]["Paid"]==1) {
                        //disabling unpaid checkboxes
                        $('#'+result[i]["ID"]).prop('disabled', true);

                        //changing classs name of unchecked
                        $('#'+result[i]["ID"]).attr('class', 'cantCheck');
                    }
                }
            }
        }); 
    });

    // Proceed button click
    $('#paid').click(function() {
        //getting ids of checkboxes
        var idArray = [];
        $('.checklist').each(function () {
            idArray.push(this.id);
        });

        if(idArray.length>0) {
            //call ajax for updating rows
            $.ajax({
                    type: "POST",
                    url: "php/updatepaid.php",
                    data:{idArray:idArray} 

            }).done(function(status) {
                status=status.trim();
                alert(status);
                window.location.href = '../index.php';
            });
        }
        else {
            alert("No row selected");
        }
    });

    // Reset all data
    $('#formreset').click(function() {
        //remvoing table rows 
        $('.child').remove();
    });
});

function addClickHandlers(identifier) {
  $(identifier).click(function() {
    data = "";
    $(this).parents('tr').children().each(function() {
        data += $(this).text() + " ";
    });
    alert("Print btn pressed from " + data);
  });
}

编辑＃3 我只需要将表中第一列的值传递给php文件，但由于它是一个隐藏的列，我不能像这样使用.text（）：

data = $(this).parents('tr').find("td:first").text();

是否有另一种方法可以从一行中获取一个列值，如果它被隐藏了？该解决方案适用于获取所有列值，即使是第一个隐藏的值，但它似乎不能单独工作。

Answer 1

以下是您尝试实现的最小尝试：

使用PHP生成按钮：

<!DOCTYPE html>
 <html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#printrec').click(function() {
          alert("Print btn pressed");
      });
    });
  </script>
 </head>
 <body>
<?php
  echo '<table>'.
    '<tr>'.
      '<td>'.
        '<input type="button" class="btn-print" value="Print" id="printrec">'.
      '</td>'.
    '</tr>'.
  '</table>';
?>
 </body>
 </html>

使用纯HTML生成按钮：

<!DOCTYPE html>
 <html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#printrec').click(function() {
          alert("Print btn pressed");
      });
    });
  </script>
 </head>
 <body>
  <table>
    <tr>
      <td>
        <input type="button" class="btn-print" value="Print" id="printrec">
      </td>
    </tr>
  </table>
 </body>
 </html>

您可以针对上述代码段验证代码吗？

更新1：OP在评论中发布了更多详细信息。

如果动态添加HTML输入，则使用要将click事件关联到的HTML输入的ID调用addClickHandlers（）函数。请看下面的代码片段。

<!DOCTYPE html>
 <html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      setTimeout(function(){ 
        addClickHandlers('#printrec');
      }, 3000);
    });
    function addClickHandlers(id) {
      $(id).click(function() {
          alert("Print btn pressed");
      });
    }
  </script>
 </head>
 <body>
  <table>
    <tr>
      <td>
        <input type="button" class="btn-print" value="Print" id="printrec">
      </td>
    </tr>
  </table>
 </body>
 </html>

更新2：OP在评论和原始帖子中发布了更多详细信息。

$(document).ready(function() {
  setTimeout(function(){ 
    addClickHandlers('.printrec');
    addClickHandlers('.printrec');
  }, 1000);
});
function addClickHandlers(identifier) {
  $(identifier).off("click");
  $(identifier).click(function() {
    data = "";
    $(this).parents('tr').children().each(function() {
        data += $(this).text() + " ";
    });
    alert("Print btn pressed from " + data);
  });
}

<!DOCTYPE html>
 <html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 </head>
 <body>
  <table border="1">
    <tr>
      <td>
        Row 1 Data 1
      </td>
      <td>
        Row 1 Data 2
      </td>
      <td>
        Row 1 Data 3
      </td>
      <td>
        <input type="button" class="btn-print printrec" value="Print">
      </td>
    </tr>
    <tr>
      <td>
        Row 2 Data 1
      </td>
      <td>
        Row 2 Data 2
      </td>
      <td>
        Row 2 Data 3
      </td>
      <td>
        <input type="button" class="btn-print printrec" value="Print">
      </td>
    </tr>
  </table>
 </body>
 </html>

更新3：修改了OP的logic.js。

$(document).ready(function() {

    var check="checklist";
    var unCheck ="unchecked-list";
    var cantCheck ="cantCheck";

    //select all button 
    $('#selectall').click(function() {
        if(this.checked) {
            //checked here
            $('#show-entries .unchecked-list').prop('checked', true);
            $('#show-entries .unchecked-list').attr('class', 'checklist');   
        }
        else {
            //unchecked here
            $('#show-entries .checklist').prop('checked', false);
            $('#show-entries .checklist').attr('class', 'unchecked-list');
        }
    });

    //checking checkbox
    $(document).on('change','.checklist, .unchecked-list',function() {
        if(this.checked) {
            //checked here
            $(this).attr('class', 'checklist');
        }
        else {
             //unchecked here
             $(this).attr('class', 'unchecked-list');
        }
    });

    $('#formsearch').click(function() {

        //getting values of text boxes
        var  contestYear= $('#contest-year').val();
        var  entryNumber= $('#entry-number').val();
        var  barCode= $('#barcode').val();
        var  firstName= $('#first-name').val();
        var  lastName= $('#last-name').val();
        var  title= $('#title-name').val();

        //remvoing previous row 
        $('.child').remove();

        $.ajax({
                type: "POST",
                url: "php/searchreceive.php",
                data:{"c_year": contestYear, "e_number": entryNumber, "bCode":barCode, "fName":firstName, "lName": lastName, "title":title} 

        }).done(function(status) {
            status=status.trim();
            if(status=="NoResults") {
                alert("No records found - please try again.");
            }
            else {
                var result = JSON.parse(status);
                var p;
                var paidOp;

                for(var i=0; i<result.length; i++) {
                    // Loop through each record in 'status'

                    //getting date paid
                    var datePaid =result[i]["DatePaid"];
                    if(datePaid==null) {
                        datePaid = "";
                    }

                    //getting yes no for paid
                    p = result[i]["Paid"].trim();
                    if(p==1) {
                        paidOp="Yes";
                    }
                    else {
                        paidOp="";
                        //datePaid="";
                    }

                    //getting date created
                    var dateCreated =result[i]["DateCreated"];
                    if(dateCreated==null) {
                        dateCreated = ""; 
                    }

                    //getting date last updated
                    var dateUpdated =result[i]["DateLastUpdated"];
                    if(dateUpdated==null) {
                        dateUpdated = "";      
                    }

                    //getting last updated by
                    var updatedBy =result[i]["LastUpdatedBy"];
                    switch(updatedBy) {
                        case "wf_boxoffice":
                            updatedBy = "Box Office";
                            break;
                        case "wf_anon":
                            updatedBy = "Entrant";
                    }

                    $('#show-entries').append('<tr class="child"><td ><input type="checkbox" class='+unCheck+'  id='+result[i]["ID"]+'></td>\
                        <td style="display:none">'+result[i]["ID"]+'</td>\
                        <td>'+result[i]["Entry_Form_Number"]+'</td>\
                        <td>'+result[i]["Barcode_Text"]+'</td>\
                        <td>'+result[i]["Entrant_Name"]+'</td>\
                        <td>'+result[i]["Model_Name"]+'</td>\
                        <td>'+result[i]["Category_Name"]+'</td>\
                        <td>'+paidOp+'</td>\
                        <td>'+datePaid+'</td>\
                        <td>'+dateCreated+'</td>\
                        <td>'+dateUpdated+'</td>\
                        <td>'+updatedBy+'</td>\
                        <td><input type="button" class="btn-print printrec" value="Print"/></td>\n\
                    </tr>');

                    //checking paid or not  and disabling checkbox if FALSE
                    if(result[i]["Paid"]==1) {
                        //disabling unpaid checkboxes
                        $('#'+result[i]["ID"]).prop('disabled', true);

                        //changing classs name of unchecked
                        $('#'+result[i]["ID"]).attr('class', 'cantCheck');
                    }
                }
                addClickHandlers('.printrec');
            }
        }); 
    });

    // Proceed button click
    $('#paid').click(function() {
        //getting ids of checkboxes
        var idArray = [];
        $('.checklist').each(function () {
            idArray.push(this.id);
        });

        if(idArray.length>0) {
            //call ajax for updating rows
            $.ajax({
                    type: "POST",
                    url: "php/updatepaid.php",
                    data:{idArray:idArray} 

            }).done(function(status) {
                status=status.trim();
                alert(status);
                window.location.href = '../index.php';
            });
        }
        else {
            alert("No row selected");
        }
    });

    // Reset all data
    $('#formreset').click(function() {
        //remvoing table rows 
        $('.child').remove();
    });
});

function addClickHandlers(identifier) {
  $(identifier).off("click");
  $(identifier).click(function() {
    data = "";
    $(this).parents('tr').children().each(function() {
        data += $(this).text() + " ";
    });
    alert("Print btn pressed from " + data);
  });
}

按钮的JS功能不起作用

1 个答案: