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