Question

创建输入后，我不允许添加文本。我正在开发一个项目，允许用户通过单击添加的文本来编辑文本以进行更改。

    var $input = $("#change");
var $btn = $("#add");
var $btne = $("#edit");
var $content = $("#content");
$btne.hide();


$btn.click( function(){

 var typedInfo = document.getElementById("change").value;
 var item = $('<li></li>');
 item.append(typedInfo);
 $content.append(item);


 $content.on("click","li", function(){
  });

 item.click( function(){
     $btne.show();
     item.text(" ");
     var typeNew = $('<input type="text" id="newInput" value = "edit">')
     item.append(typeNew);
       $btne.click( function(){
        var editedInput = document.getElementById("newInput").value;
        item.text(editedInput);
        $btne.hide();
   });
 });


});

Answer 1

map处于循环状态，您只需在项目中单击即可创建新输入。您只能使用JQuery检查one点击：

item.click

Answer 2

您可能知道，当您点击某个元素时，点击事件会传播到文档的顶部。

因此，当您单击新输入时，单击将传播到其父<li>并再次调用item.click(function(){...})并且代码执行另一次并重建所有当前输入区域。

您必须停止click事件传播给他的父母。

typeNew.click( function(e){
  e.stopPropagation();
});

完整代码

item.click(function(){
  $btne.show();
  item.text(" ");
  var typeNew = $('<input type="text" id="newInput" value = "edit">')
  item.append(typeNew);
  // Click on the new input
  typeNew.click( function(e){
    e.stopPropagation();
  });
  // Click on button
  $btne.click( function(){
    var editedInput = document.getElementById("newInput").value;
    item.text(editedInput);
    $btne.hide();
  });
});

stopPropagation documentation

jQuery - 添加输入将不允许我添加文本

2 个答案: