Jquery .append() 附加到每个事件

Question

我的 javascript 和 jquery 知识很少，所以问题是，当用鼠标单击“li”选项卡并按 ENTER jquery 附加 .append() 时鼠标点击事件。

$(document).on("click", function(event){
        let $ul_elem = $(event.target).parent().parent();
        const $li = '<li><input type="text" name="geras"></li>'
        
        if($(event.target).parent().prop("localName")=="li"){ 
            console.log($(this.event))
            $(window).on("keydown", function(event){
                if(event.keyCode == 13) {
                    event.preventDefault();
                    $($ul_elem).append($li);
                    $($ul_elem).children().last().children().focus();   
                    return false
                }
            })
        }
        else{
            $(window).unbind("keydown");
        }      
    })

结果，如果我在同一个 li 选项卡上用鼠标单击 5 次，它会创建 5 个新的 const $li 元素，我不希望这样。

Answer 1

您应该避免在另一个事件处理程序的上下文中绑定事件处理程序。您的代码当前会在每次单击时重新绑定 keydown 处理程序（当 if 语句成功时。）这就是代码在每个 Enter 上附加多个元素的原因。我猜您想有条件地将 li 元素附加到 ul 元素。如果是，这是一种方法：

$(document).on("click", "ul", function() {
     $(this).toggleClass('active');
});

$(window).on("keydown", 'ul.active', function(event) {
     if (event.keyCode == 13) {
         const $ul_elem = $(this);
         const li = '<li><input type="text" name="geras"></li>'
         event.preventDefault();
         $ul_elem.append(li);
         $ul_elem.children().last().children().focus();   
         return false
     }
})

这使得 keydown 处理程序通过使用事件委托有条件地工作。如果您想监听 input 元素的 keydown 事件，您只需编写 $(document).on("keydown", 'input[type=text]', function(event) { ... 代码即可，无需使用 click 处理程序。不过，我仍然不确定您要实现的目标。

what I want to do is after i put text in my default li > input field and press ENTER i want to create new li in ul

应该这样做：

$(document).on("keyup", 'li input[type=text]', function(event) {
    if (event.keyCode == 13) {
        const $ul_elem = $(this).closest('ul');
        const li = '<li><input type="text" name="geras"></li>'
        event.preventDefault();
        $ul_elem.append(li);
        $ul_elem.children().last().children().focus();   
    }
})

Jquery .append() 附加到每个事件

Jquery .append() appends on every event

javascript

jquery