Question

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

＆＃13;

$(".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>");
  }
});

＆＃13;

<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>

＆＃13;

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()来获取父包装元素，以减少标记的脆弱性。如果你在这两个之间添加任何东西就会中断。

如何将jQuery事件仅应用于页面上的一个输入而没有类和id

1 个答案: