我在一页上有更多的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>

最佳答案

$(".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()来获取父包装器元素,以减少标记的脆弱性。如果在这两个之间添加任何内容,则会中断。

关于javascript - 我如何将jQuery事件仅应用于页面上的一个输入而没有类和ID,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49242209/

10-11 23:34
查看更多