javascript - 当详细信息传递到模态时，id 未定义

Question

我有一个由特定用户创建的食谱表，当单击表格每一行上的铅笔标记时，会显示一个模式，显示该特定食谱的详细信息，并且它应该允许用户编辑配方并将更新的版本保存到数据库中。然而，尽管详细信息已正确传递到模式，但配方 id 似乎并未传递到模式，因为我尝试将配方 id 输出到控制台，但它说配方 id 未定义。我尝试调试此错误但无济于事。谁能解释一下为什么会这样？

 //Recipe.js    

     $('.editThis').on('click', function() {
             var recipe_id = $(this).attr('data-id');
              var request = $.ajax({
                  url: "ajax/displayRecipe.php",
                  type: "post",
                  dataType: 'json',
                  data: {recipe_id : recipe_id}
            });

            request.done(function (response, textStatus, jqXHR){
              console.log("response " + JSON.stringify(response));
              $('#name').val(response.name);
              $('#date').val(response.date);
                });

        });


    $('#editRecipe').click(function() {
      var recipe_id = $(this).attr('data-id');
        var name_input = $('#name').val();
        var date_input = $('#date').val();

        var request = $.ajax({
            url: "ajax/updateRecipe.php",
            type: "post",
            data: {name : name_input, date : date_input, recipe_id : recipe_id},
            dataType: 'json'
        });

     request.done(function (response, textStatus, jqXHR){
         console.log(response);

        });
    });

   //Recipe.php

    <?php

      $recipeObject = new recipeList($database); //Lets pass through our DB connection
      $recipe = $recipeObject->getUserRecipes($_SESSION['userData']['user_id']); 

      foreach ($recipe as $key => $recipes) { 
           echo '<tr><td>'. $value['name'].'</td><td>'. $value['date'].'</td><td>'.'<a data-id = '.$value['recip_id'].' data-toggle="modal" class="edit editThis" data-target="#editRecipe"><i class="fa fa-pencil"></i></a>'.'</td></tr>';
      }
    ?>

    // editRecipe Modal

    <div id="recipe" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header recipe">
                    <h1 class="modal-title">Edit Recipe</h4>
                </div>
                <div class="modal-body">
                    <form method="post" id="updateRecipeForm">

                   <?php
                       require_once('classes/recipes.classes.php');
                       $recipeObject = new recipeList($database);
                       $recipe = $recipeObject->getRecipeDetails(recipe_id); 
                       if(isset($_POST['submit'])) {
                          $updateRecipe = $recipeObject ->updateRecipe($_POST['name'], $_POST['date'], $_POST['recipe_id']);
                          if($updateRecipe) {
                            echo ("Your recipe has been updated!";
                          }
                       }  
                   ?>

                   <div class="form-group">
                      <input type="text" class="control-form" id="name" value = "<?php echo $recipe['name']; ?>">
                   </div> 
                   <div class="form-group">
                      <input type="date" class="control-form" id="date" value = "<?php echo $recipe['date']; ?>">
                   </div>
                   </div>
                      <div class="form-group">
                         <input type="hidden" class="form-control" data-id=".$recipe['recipe_id']." id="recipe_id" name="recipe_id" value = "<?php echo $recipe['recipe_id']; ?>">
                      </div>
                  <button type="submit" class="btn recipe" id="editRecipe" data-dismiss="modal">Save</button>
               </form>
              </div>
           </div>
        </div>
    </div>


//ajax - updateRecipe.php



     <?php
        require_once('../includes/database.php');
        require_once('../classes/recipes.classes.php');

        if($_POST['name'] && $_POST['date'] && $_POST['trans_id']){
            $recipeObject = new recipeList($database);
            echo $recipeObject->updateRecipe($_POST['name'], $_POST['date'], $_POST['recipe_id']);
        }
    ?>

//recipes.classes.php
    ...

    public function getRecipeDetails($recipeid){
             $query = "SELECT * FROM recipe WHERE recipe_id = :recipe_id";
                $pdo = $this->db->prepare($query);
                $pdo->bindParam(':recipe_id', $recipeid);
                $pdo->execute();
                return $pdo->fetch(PDO::FETCH_ASSOC);
    }

    public function updateRecipe($name, $date, $recipe_id){
            $query = "UPDATE recipe SET name = :name, date = :date WHERE recipe_id = :recipe_id";
            $pdo = $this->db->prepare($query);
            $pdo->bindParam(':name', $name);
            $pdo->bindParam(':date', $date);
            $pdo->bindParam(':recipe_id', $recipe_id);
            $pdo->execute();
        }

Answer 1

尝试以下操作:

$(document).on('click', '.editThis',function() {...});
$(document).on('click','#editRecipe',function() {...});