Ajax 请求错误 404

Question

再次您好，提前感谢您。首先让我向您展示代码和我要解决的问题：

<span class='dropdown' id='status'>
              <?php
                switch ($status) {
                  case "unassigned":
                  echo "<button type='button'  data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $status . "<span class='caret'></span></button>";
                  echo "<ul class='dropdown-menu'   aria-labelledby='edit'>";
                  echo "<li><a class='editStatus' href='pending'>Pending</a></li>";
                  echo "</ul>";
                  break;

                  case "pending":
                  echo "<button type='button'  data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $status . "<span class='caret'></span></button>";
                  echo "<ul class='dropdown-menu'   aria-labelledby='edit'>";
                  echo "<li><a class='editStatus' href='attending'>Attending</a></li>";
                  echo "<li><a class='editStatus' href='followup'>Follow Up</a></li>";
                  echo "<li><a class='editStatus' href='closed'>Closed</a></li>";
                  echo "</ul>";
                  break;

                  case "attending":
                  echo "<button type='button'  data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $status . "<span class='caret'></span></button>";
                  echo "<ul class='dropdown-menu'   aria-labelledby='edit'>";
                  echo "<li><a class='editStatus' href='pending'>Pending</a></li>";
                  echo "<li><a class='editStatus' href='followup'>Follow Up</a></li>";
                  echo "<li><a class='editStatus' href='closed'>Closed</a></li>";
                  echo "</ul>";
                  break;

                  case "followup":
                  echo "<button type='button'  data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $status . "<span class='caret'></span></button>";
                  echo "<ul class='dropdown-menu'   aria-labelledby='edit'>";
                  echo "<li><a class='editStatus' href='closed'>Closed</a></li>";
                  echo "</ul>";
                  break;

                  case "closed":
                  echo "<button type='button'  data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $status . "<span class='caret'></span></button>";
                  echo "<ul class='dropdown-menu'   aria-labelledby='edit'>";
                  echo "<li><a class='editStatus' href='pending'>Pending</a></li>";
                  echo "<li><a class='editStatus' href='attending'>Attending</a></li>";
                  echo "<li><a class='editStatus' href='followup'>Follow Up</a></li>";
                  echo "</ul>";
                  break;
                }
              ?>        
                  </span> 

我的 php 脚本中有这个跨度，其中包括一个下拉按钮，其中包含表示此页面中显示的消息的不同状态的选项，并通过 ajax 我将此信息发送到另一个 php 脚本

<script>
var phpvar1 = "<?php echo $frompost_id_sanitized; ?>";
var phpvar = "<?php echo $status; ?>";

$('a.editStatus').click(function(event) {
event.preventDefault();
    var statusJs = $(this).attr("href");

    alert('Change Status of ticket to: ' + statusJs)
    $.post('ajaxChangeStatus.php', {status: statusJs, id: phpvar1, initialStatus: phpvar}, function(data) {
        $('#status').html(data)
    });
});

最后，第二个 php 脚本将数据添加到 db 并像这样将一些 html 发送回第一个 php 脚本（省略了一些代码）

switch ($frompost_status_sanitized) {
    case "pending":
    echo "<button type='button'  data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $frompost_status_sanitized . "&nbsp;<span class='caret'></span></button>";
    echo "<ul class='dropdown-menu'   aria-labelledby='edit'>";
    echo "<li><a class='editStatus' href='attending'>Attending</a></li>";
    echo "<li><a class='editStatus' href='followup'>Follow Up</a></li>";
    echo "<li><a class='editStatus' href='closed'>Closed</a></li>";
    echo "</ul>";
    break;

    case "attending":
    echo "<button type='button'  data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $frompost_status_sanitized . "&nbsp;<span class='caret'></span></button>";
    echo "<ul class='dropdown-menu'   aria-labelledby='edit'>";
    echo "<li><a class='editStatus' href='pending'>Pending</a></li>";
    echo "<li><a class='editStatus' href='followup'>Follow Up</a></li>";
    echo "<li><a class='editStatus' href='closed'>Closed</a></li>";
    echo "</ul>";
    break;

    case "followup":
    echo "<button type='button'  data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $frompost_status_sanitized . "&nbsp;<span class='caret'></span></button>";
    echo "<ul class='dropdown-menu'   aria-labelledby='edit'>";
    echo "<li><a class='editStatus' href='closed'>Closed</a></li>";
    echo "</ul>";
    break;

    case "closed":
    echo "<button type='button'  data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $frompost_status_sanitized . "&nbsp;<span class='caret'></span></button>";
    echo "<ul class='dropdown-menu'   aria-labelledby='edit'>";
    echo "<li><a class='editStatus' href='pending'>Pending</a></li>";
    echo "<li><a class='editStatus' href='attending'>Attending</a></li>";
    echo "<li><a class='editStatus' href='followup'>Follow Up</a></li>";
    echo "</ul>";
    break;
}

一切似乎都正常：

我的想法是我（在第一个 php 脚本中）有一个带有选项的下拉按钮（代表显示的消息的状态）。当一个选项（例如状态改变）被选择（点击事件）我通过ajax发送到第二个php脚本选择的选项（新状态），然后执行一些操作并返回适当的html（具有不同oprions的下拉按钮）到第一个 php 脚本。

问题 如果然后我选择另一个选项（例如，如果我尝试在不重新加载页面的情况下再次更改状态），那么我会收到 404 错误，因为当单击选项而不是触发单击事件然后 event.preventdefault ..... .（因为它应该发生），应用程序读取 href 属性[用于将数据发送到第二个 php 脚本，如下所示：var statusJs = $(this).attr("href");] 并尝试加载导致 404 错误的页面 http://localhost:8888/ticketing/pending

通常js脚本应该从href属性读取值，阻止默认操作（例如加载导致404的页面），将数据发送到第二个php脚本并用返回的html替换span contants

怎么了？

Answer 1

委托是解决办法

https://learn.jquery.com/events/event-delegation/

非常感谢