使用jQuery实现列表项前置添加的异常触发问题排查

Alright, let's fix this issue step by step. The main problem here stems from incorrect targeting of where new list items are added, plus event bubbling causing unintended triggers. Here's the breakdown and solution:

What's Causing the Unintended Additions? #

• In your click handler for #add-list, you're prepending new list items inside the #add-list li element instead of the parent #list_item ul. This makes all new items children of the "+ List item" button, so clicking any of them bubbles up to trigger the add action again.
• Your keypress handler is bound to the entire #list_item ul, which works but isn't precise—we should target input fields directly (including dynamically added ones) using event delegation.

Fixed Code #

First, update your JavaScript:

// Handle enter key press on any input (including dynamically added ones)
$('#list_item').on('keypress', '.inpt', function(e) { 
    var key = e.keyCode ? e.keyCode : e.which; 
    if(key === 13){
        // Prepend new item to the parent ul, not the input
        $('#list_item').prepend('<li><input type="checkbox" name="checkb"><input type="text" name="txt" class="inpt"><span aria-hidden="true" class="ml-2">&times;</span></li>'); 
        // Auto-focus the new input for smoother UX
        $('#list_item').find('.inpt').first().focus();
    } 
}); 

// Handle click on "+ List item" button
$("#add-list").click(function(e){
    // Stop event bubbling to prevent unintended triggers
    e.stopPropagation();
    // Prepend new item to the parent ul, not the button itself
    $('#list_item').prepend('<li><input type="checkbox" name="checkb"><input type="text" name="txt" class="inpt" ><span aria-hidden="true" class="ml-2">&times;</span></li>'); 
    // Auto-focus the new input
    $('#list_item').find('.inpt').first().focus();
}); 

Next, clean up your HTML by removing unnecessary <br> tags (list items are block-level elements and will stack properly on their own):

<ul id="list_item" class="list-unstyled ml-3">
    <li><input type="checkbox" name="checkb"><input type="text" name="txt" class="inpt" ><span aria-hidden="true" class="ml-2">&times;</span></li>
    <li id="add-list" style="cursor:pointer;"> + List item </li>
</ul>

Key Fixes Explained #

1. Correct Prepending Target: New list items are now added directly to the #list_item ul, so they aren't nested inside the add button element anymore. This stops click events from bubbling up to trigger unwanted additions.
2. Event Delegation for Inputs: Using $('#list_item').on('keypress', '.inpt', ...) ensures that even dynamically added input fields will respond to the enter key press.
3. Prevent Bubbling: e.stopPropagation() in the click handler adds an extra layer of protection against unintended event triggers.
4. Improved UX: Auto-focusing the new input field lets users start typing immediately, matching Google Keep's intuitive behavior.

内容的提问来源于stack exchange，提问作者bharti parmar