Ajax按钮点击不工作

Ajax button click not working

本文关键字：工作按钮 Ajax 更新时间：2023-09-26

我花了几个小时搜索其他类似的问题，并尝试了所有建议的解决方案，但似乎没有任何工作。我想做的是从我的数据库中拉出关于职业的帖子。当用户找到他们想申请的职业时，他们点击按钮和标题&职位发布被转移到下一页(通过ajax post)纳入成功应用的数据库。我目前拥有的代码似乎拉正确的信息，但在点击按钮什么也没有发生。请协助!

注意:ajax调用位于文件的底部。我附上了整个文件以防有任何问题。

注2:我已经试过了。on('click'…、。onclick和。click。我尝试过使用div来指向按钮，我尝试过使用各种方法来引用按钮，我尝试过preventDefault()和这些的各种组合。

<!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" dir="ltr" lang="en-US" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Career Search Results</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
    <?php
        {
        if (!isset($_POST['CareerSearch'])) {
        die(header("Location: {$Server}CareerSearch.php"));}
        $CurrentPage= "Careers";
        $Filepath= "c:/wamp/www/";
        $Server= "http://localhost";
        include ("{$Filepath}functions.inc");
        include ("{$Filepath}header.php");
        }
    ?>
        <div class="box sheet">
            <div class="box-body sheet-body">
                <div class="layout-wrapper">
                    <div class="content-layout">
                        <div class="content-layout-row">
                            <div class="layout-cell content">
    <div class="box post">
        <div class="box-body post-body">
    <div class="post-inner article">
                                    <h2 class="postheader">Currently Available Careers
                                    </h2>
                                                    <div class="postcontent">
    <br />
    <table style= 'width: 100%'>
                <tr style= 'text-align: left'>
                    <th>Posting ID</th>
                    <th>Career Title</th>
                    <th>Department</th>
                    <th>Location</th>
                    <th>Posted On</th>
                    <th>Apply</th>
                </tr>
    <?php
    $fieldName = array("ID", "Position", "Department", "City", "State", "All");
    //get values from form
    $srchField = filter_input(INPUT_POST,"srchField");
    $srchValue = filter_input(INPUT_POST, "srchVal");
    //don't proceed unless it's a valid field name
    $mysqli = new mysqli(DBHOST,DBUSER,DBPASS,DB);
    if ($mysqli->connect_errno) {
    error_log("Cannot connect to MySQL: " . $mysqli->connect_error);
    return false;}
    if (in_array($srchField, $fieldName)){
    $field = $mysqli->real_escape_string($srchField);}
    $srchValue= strtolower($srchValue);
    //put value inside %% structure
    $value = $mysqli->real_escape_string("%$srchValue%");
    if ($srchField !== 'All' || $srchValue !== 'all' || $srchValue !== '*')
    {$query= "SELECT * FROM open_careers WHERE $field LIKE '$value'";}
    if ($srchField== 'All' || $srchValue == 'all' || $srchValue == '*')
        {$query="SELECT * FROM open_careers";}
    $result= $mysqli->query($query);
    $num = $result->num_rows;
    if (!$mysqli->query($query)) {
        echo "Couldn't execute your search.";}
    if ($num == 0 || $num= ''){
    print "No matches found";
    /* free result set */
        $result->close();
        return false;}
    if (count($num) > 0){
        $n=0;
        while($row = $result->fetch_assoc()) {
            $Posting= $row['Posting'];
            $Title= $row['Position'];
            $Department= $row['Department'];
            $City= $row['City'];
            $State= $row['State'];
            $Date= $row['Date'];
            $Location= $City . ',' . $State;
            $n++;
            echo  "
                <tr> 
                    <td>$Posting</td>
                    <td>$Title</td>
                    <td>$Department</td>
                    <td>$Location</td>
                    <td>$Date</td>
                    <td><button id='Apply{$n}' name='Apply{$n}' class='Apply{$n}'>Apply Now</button></td>
    <script type='text/javascript'>
        $(document).ready(function(){
        $('#Apply{$n}').click(function(){
        request = $.ajax({
        type: 'post',
        url: '{$Server}CareerRegisterResume.php',
        data: {
            source1: '$Posting',
            source2: '$Title',}
        request.done(function( data ){ console.log (data);});
        )};
        });});
    </script>";}
                    echo "</tr></table>";
                                    $result->free();
            }
    else {
    print "Something went wrong.";
    } // end else
    ?>

几点:

将单击事件绑定到循环外的按钮，在事件处理程序中，您可以找到哪个按钮被单击并相应地采取行动。
做一个真正的努力来阅读你的代码，看看是否有语法错误(有一些在你的)
如果可能的话，不要将客户端代码与服务器端脚本混合在一起，特别是在这种情况下，因为它是不必要的

1)向那些TD添加类，您希望在ajax调用中从中获取值，例如:

<tr> 
    <td class="posting">$Posting</td>
    <td class="title">$Title</td>
    <td>$Department</td>
    ...
    ...

2)将您的竞争javascript移出PHP块，就在?>

之后

$(document).ready(function() {
    //Target all buttons that has a class starting with 'Apply'
    $("button[class^='Apply']").on("click", function() {
        var $this = $(this),
            $tr = $this.closest("tr"),
            data = {
                source1: $tr.find(".posting").text(),
                source2: $tr.find(".title").text()
            },
            request = $.ajax({
                type: "post",
                url: "http://localhost/CareerRegisterResume.php",
                data: JSON.stringify(data)
            });
        request.done(function(data) {
            console.log (data);
        });
    });
});

测试代码，看看它是否有效。如果需要，重复我在一开始提到的要点，以解决进一步的问题。

你试过了吗

$(document).on('click', '#Apply{$n}', function() { ...

有时你应该动态地添加这个函数。

当你检查JS代码是否显示#Apply1， #Apply2， #Apply3…?