javascript - onclick 函数不适用于 Bootstrap 模式

Question

这是我的点击函数

$(".addPizza").on("click", function(event) {
  event.preventDefault();
  console.log("hello")
  let userId = $("#userId").attr("data-id");
  let pizzaRecipe = $('#pizza-recipe').val().trim();
  let ingredients = JSON.stringify(obj);
  let title = $("#pizza-title").val().trim();

  let newPizza = {
    userid: userId,
    recipe: pizzaRecipe,
    ingredients: ingredients,
    totalCal: calTotal,
    title: title
  };
  $.ajax('/api/pizza', {
    type: 'POST',
    data: newPizza
  }).then(() => {
    console.log('Created new pizza recipe');
    location.reload();
  });
  $.ajax('/', newPizza).then(() => {
    console.log('Created new pizza recipe');
    // location.reload();
  });
});

这是我的 html 模态

<button id="button" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Add a recipe</button>
<!-- end of button -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New Recipe</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
      </div>
      <div class="modal-body">
        <form>

          <form class="recipe-form" action="/pizza" method="POST">
            <a id="userId" data-id=<%=user.id %></a>



            <input type="text" id="pizza-title" name="pizza-title" placeholder="title"><br>
            <input type="text" id="pizza-recipe" name="pizza-recipe" placeholder="recipe"><br>

            <label for="vegy1">Cucumber</label>
            <input type="number" class="quant" name="vegy1" data-name="cucumber" min="0" max="3" value="0">

            <label for="vegy2">Tomato</label>
            <input type="number" class="quant" name="vegy2" data-name="tomato" min="0" max="3" value="0">

            <label for="vegy3">Pineapple</label>
            <input type="number" class="quant" name="vegy3" data-name="pineapple" min="0" max="3" value="0">

            <label for="vegy4">Avocado</label>
            <input type="number" class="quant" name="vegy4" data-name="avocado" min="0" max="3" value="0"><br>

            <label for="vegy5">Eggplant</label>
            <input type="number" class="quant" name="vegy5" data-name="eggplant" min="0" max="3" value="0">

            <label for="vegy6">Olive</label>
            <input type="number" class="quant" name="vegy6" data-name="olive" min="0" max="3" value="0">

            <label for="vegy7">Onion</label>
            <input type="number" class="quant" name="vegy7" data-name="onion" min="0" max="3" value="0">

            <label for="vegy8">Mushroom</label>
            <input type="number" class="quant" name="vegy8" data-name="mushroom" min="0" max="3" value="0"><br>

            <label for="vegy9">Garlic</label>
            <input type="number" class="quant" name="vegy9" data-name="garlic" min="0" max="3" value="0">

            <label for="vegy10">Spinach</label>
            <input type="number" class="quant" name="vegy10" data-name="spinach" min="0" max="3" value="0">

            <label for="vegy11">Cilantro</label>
            <input type="number" class="quant" name="vegy11" data-name="cilantro" min="0" max="3" value="0">

            <label for="vegy12">Chicken</label>
            <input type="number" class="quant" name="vegy12" data-name="chicken" min="0" max="3" value="0"><br>

            <label for="vegy13">Anchovy</label>
            <input type="number" class="quant" name="vegy13" data-name="anchovy" min="0" max="3" value="0">

            <label for="vegy14">Bacon</label>
            <input type="number" class="quant" name="vegy14" data-name="bacon" min="0" max="3" value="0">

            <label for="vegy15">Sausage</label>
            <input type="number" class="quant" name="vegy15" data-name="sausage" min="0" max="3" value="0">

            <label for="vegy16">Beef</label>
            <input type="number" class="quant" name="vegy16" data-name="beef" min="0" max="3" value="0"><br>

            <label for="vegy17">Ham</label>
            <input type="number" class="quant" name="vegy17" data-name="ham" min="0" max="3" value="0">

            <label for="vegy18">Pepperoni</label>
            <input type="number" class="quant" name="vegy18" data-name="pepperoni" min="0" max="3" value="0">

            <label for="vegy19">Salami</label>
            <input type="number" class="quant" name="vegy19" data-name="salami" min="0" max="3" value="0">

            <label for="vegy20">Banana</label>
            <input type="number" class="quant" name="vegy20" data-name="banana" min="0" max="3" value="0"><br>

            <p id="totalCal"></p>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary addPizza">Add Recipe</button>
            </div>

          </form>
      </div>
    </div>
  </div>
</div>

let mysql = require("mysql");

let connection;

if (process.env.JAWSDB_URL) 
    // DB is JawsDB on Heroku
    connection = mysql.createConnection(process.env.JAWSDB_URL);
else 
    // DB is local on localhost
    connection = mysql.createConnection({
        port: 3306,
        host: 'localhost',
        user: 'root',
        password: 'pass',
        database: 'pizza_recipe_db'
    });

// Establish connection to MySQL
connection.connect((err) => {
    if (err) {
        console.error(`error connecting MySQL: ${err.stack} \n`);
        return;
    }
    console.log(`Connected to MySQL as id ${connection.threadId} \n`);
});

// Export connection
module.exports = connection;

当我点击添加食谱按钮时，它也给我这个错误获取 http://localhost:3000/ 网络::ERR_EMPTY_RESPONSTPOST http://localhost:3000/api/pizza 网络::ERR_CONNECTION_REFUSED

POST http://localhost:3000/api/pizza net::ERR_CONNECTION_REFUSED

有人告诉我应该使用“事件委托(delegate)”，但我不确定该怎么做。

感谢您的帮助。如果您需要更多代码，请告诉我。谢谢!

Answer 1

您没有在 HTML 中正确关闭 anchor 标记，这就是用户 ID 不正确的原因。检查下一行

<a id="userId" data-id=<%=user.id %></a>

应该是

<a id="userId" data-id=<%=user.id %>></a>

由于没有正确关闭，JS 发送了 userid = 3 </a在 Mysql 你的列是 user_id 不是文本，它是无符号整数。这就是为什么您的插入代码无法将 Text 值插入整数列并抛出 sql 异常并退出服务器操作的原因。这就是你出错的原因

http://localhost:3000/          net::ERR_EMPTY_RESPONSTPOST 
http://localhost:3000/api/pizza net::ERR_CONNECTION_REFUSED

因为服务器已退出且未运行。

更改上面给出的 anchor 标记，您的代码将完美运行。