javascript - 如何防止用户输入被克隆到javascript中的附加输入框中

Question

当我在模块 1 的输入框中插入一些内容并单击“添加模块”按钮来克隆我需要的所需元素时，它也会克隆插入的输入，我试图使用 event.preventDefault(); 来阻止这种情况发生；但它仍在复制带有从模块 1 插入的输入的输入框，但是，我无法使用输入框中的清除按钮清除它，而且附加的选择选项不起作用，当我选择一个选项时，它不起作用不变。

这是我的演示:-

http://jsfiddle.net/0ojjt9Lu/6/

这是我的 JavaScript 代码:

 $(document).ready(function(){
    $("#Sadd").click(function(event) {
    event.preventDefault();
    var lastId = $("#modules h1").length;
    var $newLabel = $("#module-1-label").clone();
    var $newSc = $("#module-1-scredit").clone();
    var $newSgrade = $("#module-1-sgrade").clone();
    $newLabel.html("<h1>Module " + (lastId+1) + ":</h1>");
    $newSc.find("label").attr("for", "Sc"+(lastId+1));
    $newSc.find("input").attr("name", "Sc"+(lastId+1)).attr("id", "Sc"+(lastId+1));
    $newSgrade.find("label").attr("for", "Sgrade"+(lastId+1));
    $newSgrade.find("select").attr("name", "Sgrade"+(lastId+1)).attr("id", "Sgrade"+(lastId+1));
    $("#modules").append($newLabel, $newSc, $newSgrade);
 });
 $("#Sremove").click(function() {
   var lastId = $("#modules h1").length;
   if(lastId > 5){
      var lastLi = $("#modules h1").last().closest("li");
      var lastLi2 = lastLi.next("li");
      var lastLi3 = lastLi2.next("li");
      lastLi.remove();
      lastLi2.remove();
      lastLi3.remove();   
    }
  });
});

Answer 1

在新输入上使用 .val("") 清除克隆中的数据或者执行 $(clone).find('input').val(""); 如果有多个输入

在您使用选择框的情况下，您需要添加以下行声明(或在同一行)变量之后

var $newSc = $("#module-1-scredit").clone().find('input').val("");
var $newSgrade = $("#module-1-sgrade").clone().find('option:selected').removeAttr('selected');
$newSgrade.find('option[value="-1"]').attr('selected',true);

编辑:由于默认值为“-1”，因此必须处理选择的重新选择，但是您可能需要查看此选择元素的克隆。也许页面上隐藏了空白问题，只需克隆它即可。