JQUERY 不在（onchange）函数上工作答案

【问题标题】：JQUERY is not working on (onchange) functionJQUERY 不在（onchange）函数上工作
【发布时间】：2021-06-30 05:09:36
【问题描述】：

我正在创建依赖项下拉列表，但是，

当我将 Id 从一个函数传递给另一个函数时，它不起作用这是一些代码示例

<?php
include("includes/db.php");
?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>
    <select id="all_category">
        <option>select a category</option>
    </select>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        category();
         function category(){
            $.ajax({
            url : "action.php",
            method : "POST",
            data : {category:1},
            success : function(data){
                $("#all_category").html(data)
            }
        })
    }
    $("#all_category").change(function () {
        var val = $(this).val();
        var xyz = $("#all_category option:selected").val();
        console.log("hello"+xyz)
    })
    })
</script>
</body>
</html>

这段代码是从API取数据，

当我从第一个下拉列表中打印 ID 时，

它只是在 console.log 中的 My Id 变量之前打印按摩

<?php
include "../db.php";
if (isset($_POST["category"])) {
    $get_assign_course = "SELECT * FROM categories";
    $run_p_cats = mysqli_query($con,$get_assign_course);
    while ($rows=mysqli_fetch_array($run_p_cats)) {
        $cat_id  = $rows['cat_id '];
        $cat_title = $rows['cat_title'];
        echo "<option value='$cat_id '>$cat_title</option>
        ";}}
?>

这是我的API 帮忙？

【问题讨论】：

Javascript 中的category(); 是做什么的？那要去哪里？您是否最初看到所有类别，当用户选择一个时您遇到问题？
是的，最初我的所有类别都包含我的 API 中的代码，我想要的是在我选择的 console.log 中打印该类别的 ID
你试过$("#all_category option:selected").text()

标签： php jquery ajax api mysqli

【解决方案1】：

尝试改变这一点： $("#all_category").change(函数进入这个：

$("#all_category").on('change',function

或者试试这个：

$(document).on('change','#all_category',function(){

让我知道这是否适合你

【讨论】：

我已经尝试过了，但它不起作用$(document).on('change','#all_category',function(){ var val = $(this).val(); var xyz = $("#all_category option:selected").val(); console.log("hello"+xyz) })

【解决方案2】：

当你在 jQuery 中使用 .html() 时，它会破坏任何已经发生在事件上的绑定。那是因为html 移除了 DOM 树并用数据重新初始化它。

<script type="text/javascript">
  $(function() {
    $.ajax({
      url: "action.php",
      method: "POST",
      data: {category: 1},
      success: function (data) {
        $("#all_category").html(data);
        $("#all_category").on('change', function (evt) {
          console.log($(this).val())
        })
      }
    });
  });
</script>

要解决此问题，您需要在调用 .html() 后重新绑定。

【讨论】：