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

Question

I have more divs on one page and they are all kinda same. All of them have text input. In javaScript file there is an event where whenever I press enter in input field it makes a new list in div. The problems is when I press enter it makes a new list on all present divs.

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

You might want to grab a parent wrapper element using closest() instead, to reduce fragility with your markup. If you add anything between these two this breaks.