Javascript 动态生成的文本框和实时搜索

我尝试使用JQuery动态添加文本框，并对每个文本框进行实时搜索。。它正在工作，但我想在表中添加文本框，每个表行包含五列。除第一列外，每列包含一个文本框。第一列包含复选框。特别是文本框应该是不同的ID。。。。我试着用下面的代码。。但工作不正常

$(document).ready(function () {
            x=0;
            $('#btn-addrow').on('click', function () {
                $('#tbl-data').append('<tr><td><input type="checkbox"></td><td><div class="search-box"><input type="text" id='txt'+x+''><div class="res"></div></div></td><td><input type="text"></td><td><input type="text"></td></tr>');
               x++;
$('.search-box input[type="text"]').on("keyup input", function () {
                    /* Get input value on change */
                    var term = $(this).val();
                    var resultDropdown = $(this).siblings(".res");
                    if (term.length) {
                        $.get("../svr/aj-live-search.php", {query: term}).done(function (data) {
                            // Display the returned data in browser
                            resultDropdown.html(data);
                        });
                    } else {
                        resultDropdown.empty();
                    }
                });

                // Set search input value on click of result item
                $(document).on("click", ".res p", function () {
                    $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
                    $(this).parent(".res").empty();
                });
            })
        })

$（文档）.ready（函数（）{
x=0；
$（'btn addrow'）。在（'click'，函数（）{
$（“#待定数据”）。追加（“”）；
x++；
$（'.search box input[type=“text”]'）。打开（“键控输入”，函数（）{
/*获取更改时的输入值*/
var term=$（this.val（）；
var resultDropdown=$（this.sillides（“.res”）；
if（期限长度）{
$.get（“../svr/aj live search.php”，{query:term}）.done（函数（数据）{
//在浏览器中显示返回的数据
html（数据）；
});
}否则{
resultDropdown.empty（）；
}
});
//单击结果项时设置搜索输入值
$（文档）。在（“单击”、“.resp”上，函数（）{
$（this.parents（“.search box”）.find（'input[type=“text”]）.val（$（this.text（））；
$（this.parent（“.res”）.empty（）；
});
})
})

首先，append部分出现了一些语法错误，您如何在按钮和click事件中使用带有keyup事件的live search，所以我简化了您的代码请尝试一下，希望它能工作

$(document).ready(function () {
x=0;
$('#btn-addrow').on('click', function () {
    // alert('Do what ever');
    $('#tbl-data').append('<tr><td><input type="checkbox"></td><td><div class="search-box"><input type="text" id="txt'+x+'"><div class="res"></div></div></td><td><input type="text"></td><td><input type="text"></td></tr>');
    x++;

})
   // Set search input value on click of result item
   $('.search-box input[type="text"]').on("keyup input", function () {
    /* Get input value on change */
    var term = $(this).val();
    var resultDropdown = $(this).siblings(".res");
    if (term.length) {
        $.get("../svr/aj-live-search.php", {query: term}).done(function (data) {
                        // Display the returned data in browser
                        resultDropdown.html(data);
                    });
    } else {
        resultDropdown.empty();
    }
   });

   $(document).on("click", ".res p", function () {
    $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
    $(this).parent(".res").empty();
   });

$（文档）.ready（函数（）{
x=0；
$（'btn addrow'）。在（'click'，函数（）{
//警惕（“做任何事”）；
$（“#待定数据”）。追加（“”）；
x++；
})
//单击结果项时设置搜索输入值
$（'.search box input[type=“text”]'）。打开（“键控输入”，函数（）{
/*获取更改时的输入值*/
var term=$（this.val（）；
var resultDropdown=$（this.sillides（“.res”）；
if（期限长度）{
$.get（“../svr/aj live search.php”，{query:term}）.done（函数（数据）{
//在浏览器中显示返回的数据
html（数据）；
});
}否则{
resultDropdown.empty（）；
}
});
$（文档）。在（“单击”、“.resp”上，函数（）{
$（this.parents（“.search box”）.find（'input[type=“text”]）.val（$（this.text（））；
$（this.parent（“.res”）.empty（）；
});

}))

与可能的副本相同