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

How can I prevent users input to be cloned in the appended input box in javascript

本文关键字：输入 用户 何防止 javascript      更新时间：2023-09-26

当我在模块1的输入框中插入一些东西并单击添加模块按钮来克隆我需要的所需元素时，它还克隆了我试图使用event.prventDefault（）阻止的插入输入；但它仍然在复制带有模块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();   
    }
  });
});

在新输入上使用.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"，因此必须处理select的重新选择，但是您可能需要查看此select元素的克隆。也许在页面上隐藏了空白问题，然后克隆它。

相关文章：