Question

我对Javascript和Jquery相当新。我目前的项目是一个非常简单的任务列表。我的html有一个输入，一个按钮和一个ul。我在js上创建了一个函数，每当用户在输入上写入内容并单击按钮时，它就会在ul内创建一个li项。所述li包括编辑按钮。我现在要做的是：做一个事件，当＆＃34;编辑＆＃34;单击按钮，创建一个输入，我可以在其上重写我的消息。现在，我遇到的问题是我一直试图创建输入。我试图使用以下代码：

function Edit() {
    $('.edit').on('click', function() { 
    //this line assigns an event on buttons with class:"edit"
    var data = $(this).attr("data-id") 
    //this var returns the data-id value of the specific button I pressed       
    var container = $("#d"+data) 
    //this brings me the div that contains, among other things, the "edit" button.
    var input = '<input type="text">'; 
    //creates an input
    container.append(input) 
    //apends the input to the div` 
  });
}

我现在的问题是：如果我在我的任务列表中只创建了一个元素，如果我有多个元素，它会创建与第一个元素在ul上的元素一样多的输入，然后开始在后续的一个上减去一个。我一直在思考这个问题几个小时，我似乎无法理解为什么会发生这种情况，所以我真的很感激一些输入，这样我才能理解发生了什么并解决它。非常感谢!!!

编辑添加html：我的HTML是以下

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <title>Mi lista de tareas</title>
</head>
<body>
    <div class="container">
        <h1>Mi lista de tareas</h1>
        <div id="ingreso">
            <div id="input-boton">
                <input type="text" id="inputId"/>
                <button id="agregar">Agregar</button>
            </div>
            <ul id="lista">
            </ul>
        </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/toDoList.js"></script>
</body>
</html>

＆＃34; agregar＆＃34;按钮创建一个这样的节点：

`<div id=(assigned by a counter)>
   <li>
    <div>
      <edit button>
      <delete button>
    </div>
  </li>
</div`

感谢!!!

JQuery：我尝试创建一个输入，并且该事件返回多个输入

0 个答案: