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

时间:2015-11-12 13:56:55

标签: javascript jquery html

当我在模块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();   
    }
  });
});

1 个答案:

答案 0 :(得分:2)

在新输入上使用.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);

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