Question

我正在创建依赖项下拉菜单，

当我将 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 帮助？

Answer 1

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

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

或者试试这个：

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

告诉我这是否适合您

Answer 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() 后重新绑定。

JQUERY 不适用于 (onchange) 函数

2 个答案: