动态添加输入框后，编辑原有输入框时Suggestion Box无法显示

你遇到的问题核心是DOM选择器没有精准定位到当前操作的输入框对应的建议框，导致全局操作覆盖了原有输入框的行为——新添加的输入框能正常工作是因为刚添加时全局选择器刚好命中，但编辑旧输入框时，全局选择器会操作所有元素，导致无法正确显示对应建议框。

具体问题点 #

• 全局选择器滥用：比如$(".flavour-name-input")、$(".suggestion-box")会选中所有同类元素，而不是当前输入框对应的那个
• 错误的DOM遍历逻辑：$('.flavhey input').closest('flavourInput input')存在语法错误（class选择器缺少.），且遍历逻辑错误，closest是向上查找父元素，不能用来定位同级或子元素
• 事件回调上下文丢失：AJAX回调里的this已经不是触发keyup的输入框，需要提前保存当前元素的引用

修复后的完整代码 #

JavaScript部分 #

<div id="tester"></div> 
<button id="add_test">ADD</button>

<script>
$(document).ready(function() { 
    $("#add_test").on("click", function() { 
        var input = '<div class="flavhey"><div class="flavourInput"><input class="ftext form-control flavour-name-input" type="text" name="flav-name-input" value="" placeholder="Flavour Name" /><div class="suggestion-box"></div></div></div>';
        $('#tester').append(input); 
    }); 

    $(document).on('keyup', '.flavour-name-input', function(e){ 
        // 保存当前输入框的上下文，避免AJAX回调中this指向变化
        var $currentInput = $(this);
        var $suggestionBox = $currentInput.next('.suggestion-box');
        var token = '<?php echo json_encode($token); ?>'; 
        var search = $currentInput.val(); 

        $.ajax({ 
            type: "POST", 
            url: "controllers/recipeControl.php", 
            data: { token: token, search: search }, 
            beforeSend: function(){ 
                // 只修改当前输入框和对应建议框的样式
                $currentInput.css("background","#FFF no-repeat 165px"); 
                $suggestionBox.css("background","#FFF no-repeat 165px"); 
            }, 
            success: function(data){ 
                // 只显示当前输入框对应的建议框并填充内容
                $suggestionBox.html(data).show(); 
                $suggestionBox.css("background","#FFF"); 
            } 
        }); 
        return false; 
    }); 

    $(document).on("click",".search-flavour",function(e) { 
        e.preventDefault(); 
        var $this = $(this);
        // 精准定位当前点击项对应的输入框
        $this.closest('.flavourInput').find('.flavour-name-input').val($this.text()); 
        // 隐藏当前点击项所属的建议框，而非所有建议框
        $this.closest('.suggestion-box').hide(); 
        return false; 
    });
});
</script>

PHP部分（controllers/recipeControl.php） #

<?php
session_start();
if(isset($_POST['search'])) { 
    if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && isset($_POST['token']) && json_decode($_POST['token']) === $_SESSION['token']){ 
        $search = $_POST['search']; 
        $html = '<ul>'; 
        $content = $flavours->getAllFlavoursSearch($search); 
        foreach ($content as $con) { 
            $html .= '<li class="search-flavour"><b>'.$con['flavour_name'].'</b> - <i>'.$con['flavour_company_name'].'</i></li>'; 
        } 
        $html .= '</ul>'; 
        echo $html; 
    } 
}
?>

关键修复说明 #

1. 保留当前元素上下文：在keyup事件中先保存$(this)为$currentInput，确保AJAX回调中能精准操作当前输入框
2. 精准定位建议框：通过$currentInput.next('.suggestion-box')找到当前输入框对应的建议框，避免全局选择器影响其他元素
3. 修正点击事件逻辑：点击建议项时，只隐藏当前对应的建议框，而不是所有.suggestion-box
4. 分离JS与PHP代码：将原本混在JS中的PHP逻辑移到单独的控制器文件中，代码结构更清晰

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