javascript - 如何将 jQuery 事件仅应用于页面上的一个输入，而无需类和 id

Question

我在一页上有更多的 div，它们都有点相同。它们都有文本输入。在 javaScript 文件中，有一个事件，每当我在输入字段中按 Enter 时，它都会在 div 中创建一个新列表。问题是当我按 Enter 键时，它会在所有现有的 div 上创建一个新列表。

$(".container").on("keypress", "input[type='text']", function(key){
  if(key.which === 13){
    var todoText = $(this).val();
    $("ul").append("<li><span><i class='fas fa-trash-alt'></i></span> " + todoText + "</li>");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="grupa">
<h1>To-Do List<span id="form"><i class="fas fa-edit"></i></span></h1>
<input type="text" placeholder="Add New Todo">

<ul>
  <li><span><i class="fas fa-trash-alt"></i></span> Sabah</li>
</ul>
</div>

Answer 1

$(".container").on("keypress", "input[type='text']", function(key) {
  if (key.which === 13) {
    var todoText = $(this).val();


    $(this).next("ul").append("<li> ... </li>");
    // ^-----^---------------- here's your huckleberry
  }
});

<强> Demo

您可能希望使用 closest() 来获取父包装元素，以减少标记的脆弱性。如果您在这两者之间添加任何内容，则会中断。