Question

我有一个使用$(".add_more").click(function(e){ });函数以及删除按钮动态添加表单元素的表单。提交按钮将根据尺寸数附加一个svg元素。当我尝试删除表单元素并重新提交时，单击“提交”后，可以看到正在创建svg元素。我试图跟踪逻辑，但是“提交”按钮没有触发$("form").submit(function(e){( )}调用。关于我在这里缺少什么的任何线索？您可以从代码段中运行代码。

$(document).ready(function(e) {
  var maxrows = 6;
  var x = 1;
  var i = 1;
  var j = 1;
  var maxlevels = 2;
  $(".add_more").click(function(e) {
    if (x <= maxrows) {
      var dimension_name = "dimension" + i;
      var level_name1 = "level" + i + "_" + 1;
      var level_name2 = "level" + i + "_" + 2;
      var level_name3 = "level" + i + "_" + 3;
      var html =
        '<div>Dimension <input type="text" value="sales" name="' +
        dimension_name +
        '"> Level 1 <input type="text" value="Northeast" name="' +
        level_name1 +
        '"> Level 2 <input type="text" value="NorthWest" name="' +
        level_name2 +
        '"> Level 3 <input type="text" value="WestCoast" name="' +
        level_name3 +
        '"> <input id="del" type="button" value="X"><br></div>';
      $("#container").append(html);
      x++;
      i++;
    }
  });
  $("#container").on("click", "#del", function(e) {
    $(this)
      .parent("div")
      .remove();
    x--;
    $("#spiderContainer").text("");
    //location.reload();
  });

  $("form").submit(function(e) {
    event.preventDefault();
    var dim = [];
    var lev = [];
    var obj = {};
    var input = $(this).serializeArray();
    var inputLength = input.length;
    for (var i = 0; i < inputLength; i++) {
      var val = input[i].name.startsWith("dim");
      if (val) {
        dim.push(input[i].value);
      } else {
        lev.push(input[i].value);
      }
    }
    drawSpider(dim, lev);
  });

  function drawCircle(originX, originY) {
    var cx = originX;
    var cy = originY;
    console.log(cx);
    var circle =
      '<circle cx="' +
      cx +
      '" cy="' +
      cy +
      '" r="60" style="stroke:#000000; fill:#ec0907" />';
    var line =
      '<line  x1="500" y1="440" x2="500" y2="10" style="stroke: #006600; stroke-width:3;"/>';
    var existing = $("#svgContainer").html();
    $("#svgContainer").html(existing + circle);
    //$("#svgContainer").html(existing+line);
    //spiderContainer.append(line);
  }
  function drawSpider(dim, lev) {
    var spiderContainer = $("#spiderContainer");
    var width = spiderContainer.width();
    var height = spiderContainer.height();
    var originX = width / 2;
    var originY = height / 2;
    drawCircle(originX, originY);
    var thetaIncrement = (2 * Math.PI * (180 / Math.PI)) / dim.length;
    var theta = 0;
    for (var i = 0; i < dim.length; i++) {
      var radius = 60;
      var cosTheta = Math.cos(theta * (Math.PI / 180));
      var sinTheta = Math.sin(theta * (Math.PI / 180));
      var x1 = originX + radius * cosTheta;
      var y1 = originY + radius * sinTheta;
      var limblength = 200;
      var x2 = limblength * Math.cos(theta * (Math.PI / 180));
      var y2 = limblength * Math.sin(theta * (Math.PI / 180));
      drawLine(x1, y1, x1 + x2, y1 + y2);
      theta += thetaIncrement;
    }
  }

  function drawLine(x1, y1, x2, y2) {
    var line =
      '<line  x1="' +
      x1 +
      '" y1="' +
      y1 +
      '" x2="' +
      x2 +
      '" y2="' +
      y2 +
      '" style="stroke: #006600; stroke-width:3;"/>';
    var existing = $("#svgContainer").html();
    $("#svgContainer").html(existing + line);
  }
});

#spiderContainer{
    border-style: solid;
    width: 1000px;
    height: 1000px;
   
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <div id="container">
    Dimension <input type="text" value ="testdimension" name="dimension0" id="dimension">
    Level 1 <input type="text" value ="testlevel1" name="level0_1" id="level1">
    Level 2 <input type="text" value ="testlevel2" name="level0_2" id="level2">
    Level 3 <input type="text" value ="testlevel3"  name="level0_3" id="level2">
    <input class="add_more" type="button" value="add more"><br>
    </div>
    <input type="submit" value="submit">
</form>
<div id="spiderContainer">
        <svg id="svgContainer" viewBox="0 0 1000 1000">
      </svg>

Answer 1

调用删除函数时，您正在删除包含svgContainer的spiderContainer。在这里：

$("#container").on("click", "#del", function(e) {
    $(this)
      .parent("div")
      .remove();
    x--;
    $("#spiderContainer").text(""); /** ** Here ** **/
  });

因此，这正在删除svgContainer，并且您的输出未打印在屏幕上。（提交工作正常。）

将其更改为此，它将可以正常工作：

$("#container").on("click", "#del", function(e) {
    $(this)
      .parent("div")
      .remove();
    x--;
    $("#svgContainer").text("");
    //location.reload();
  });

调用$（'＃idname'）。html（“”）;后，jQuery表单提交不起作用。

1 个答案: