Question

我的代码：

$(document).ready(function(){
  console.log("jquery works");



  // **** Global Variables ****
  //staring ingridient number for new ingridients
  $ing_num = 3;
  var new_label;
  var new_input;

  $("#add_icon").click(function(){
    console.log("add clicked. Add ingridient input");
    $new_label = $("#new_ingrs").append("<li class='label_list'><label class='input_label' for='ingr"+$ing_num+"'>Ingridient no."+$ing_num+"<label></li>");
    $new_input = $("#new_ingrs").append("<li class='recipe_content'><input type='text' placeholder='Ingridient' id='ingr"+$ing_num+"' name='ingr"+$ing_num+"' value=''><i class='uk-icon-remove' id='remove_ingr' name='remove_ingr'></i></li>");
    $ing_num = $ing_num + 1;
  });

  
   $("#remove_ingr").click(function(){
  console.log("button click");
  });

 


  $("#add_new_rec").click(function(){
	  console.log("button click");
      $("#rec_form").submit(function(event){
        var form_data = $(this).serializeArray();
        console.log(form_data);
        event.preventDefault();
		console.log("submit form");
        var stred_form = JSON.stringify(form_data);

        // change the pos file to php
        // to parse the data to the json file

        $.ajax({
          url: "http://localhost:81/Recipes/backend/new_recipe.php",
          type: "POST",
          data: {formed_data: stred_form},
          dataType: "json",
          cache: false,
          success: function(){
            console.log("Success of submiting the form");
          },
          statusCode: {
            404: function(){
              console.log("file not found");
            }
          },
          error: function(xhr, desc, err) {
            console.log(xhr);
            console.log("Details: " + desc + "\nError:" + err);
          }

        });

      });
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <script src="scripts/jquery-2.2.4.js"></script>
    <script src="scripts/script.js"></script>
    <script src="scripts/jquery-ui-1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="scripts/jquery-ui-1.11.4/jquery-ui.min.css">
    <link rel="stylesheet" href="styles/uikit-2.26.3/css/uikit.gradient.min.css">
    <link rel="stylesheet" href="styles/style.css">
    <meta charset="utf-8">
    <title>Recipes</title>
  </head>
  <body>
    <div class="uk-grid">
      <div class="main_cont uk-width-1-1">

        <div class="uk-grid">
          <div class="form_wraper uk-width-3-10">
            <p class="form_title">Add Recipe</p>
            <ul>
              <form class="new_rec" action="" method="post" id="rec_form">

                <li class="label_list"><label class="input_label" for="rec_name">Recipe Name<label></li>
                <li class="recipe_content"><input type="text" placeholder="Recipe Name" id="rec_name" name="rec_name" value="" required></li>

                <li class="label_list break10"><label class="input_label" for="ingr1">Ingridient no.1<label></li>
                <li class="recipe_content"><input type="text" placeholder="Ingridient" id="ingr1" name="ingr1" value="" required></li>

                <li class="label_list"><label class="input_label" for="ingr2">Ingridient no.2<label></li>
                <li class="recipe_content"><input type="text" placeholder="Ingridient" id="ingr2" name="ingr2" value="" required></li>

                <i class="uk-icon-plus uk-icon-large break10 add_icon" id="add_icon" style="margin-left: 150px;"></i>
			

                <!-- add new inputs for more ingridients -->
                <div id="new_ingrs"></div>

                <li class="label_list break10"><label class="input_label" for="rec_image">Recipe Image<label></li>
                <li class="recipe_content"><input type="file" placeholder="Recipe Image" id="rec_image" value=""></li>
                
                <li class="add_new_rec"><button id="add_new_rec" class="uk-button-success">Add New</button></li>
              </form>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </body>
</html>

当我点击删除按钮时，我无法收到console.log条消息。此外，我无法提交，我收到错误：jquery-2.2.4.js:9175 POST http://localhost:81/Recipes/backend/new_recipe.php net::ERR_CONNECTION_REFUSED。

Answer 1

改变这个：

$("#remove_ingr").click(function(){

到这个

$(document.body).on("click", "#remove_ingr", function(){

第一个事件处理程序向按钮元素添加一个click事件处理程序，该事件处理程序在调用它时几乎不执行任何操作。

然而，第二个版本将click处理程序添加到body元素，并且仅侦听ID为remove_ingr的元素的点击。 body元素永远不会更改，因此您的事件处理程序始终有效。

jquery无法提交表单

1 个答案: