Javascript jQuery（创建输入后突出显示文本）

我对jQuery和js非常陌生。这是一个问题。 我需要创建一个按钮，添加一个输入字段，然后突出显示给定文本中与输入中的文本匹配的所有表达式。 我对添加新的输入字段没有问题。我还找到了在文本中突出显示区域的解决方案。问题是我不能把这两件事结合在一起。 所以我有以下几点：如果页面上已经有输入字段，我在这里输入smth，文本中匹配的部分就会突出显示。但若我使用按钮添加新的输入字段，然后在那个里键入任何内容，那个么并没有突出显示。 这个问题可能很傻，所以你们能至少告诉我在哪里可以确切地读到它吗？我是新来的，不知道为什么会这样。

$（文档）.ready（函数（）{
//var max_fields=；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x<2）{//max允许输入框
x++；//文本框增量
$（包装器）。附加（“”）；
//添加输入框
}
});
$（“input”）.on（“input.highlight”，函数（）{
//确定指定的搜索项
var searchTerm=$（this.val（）；
//突出显示特定上下文中的搜索词
$（“#上下文”）.unmark（）.mark（搜索术语）；
}).trigger（“input.highlight”）.focus（）；
});

使用

（文档）。对于动态创建的元素，如：

$( document ).on( "input.highlight", "input", function() {
// Determine specified search term
var searchTerm = $(this).val();
// Highlight search term inside a specific context
$("#context").unmark().mark(searchTerm);
}).trigger("input.highlight").focus();
});

这是一个更新的小提琴
使用
（文档）。在
上，对于这样的动态创建元素：

$( document ).on( "input.highlight", "input", function() {
// Determine specified search term
var searchTerm = $(this).val();
// Highlight search term inside a specific context
$("#context").unmark().mark(searchTerm);
}).trigger("input.highlight").focus();
});

下面是一个更新的fiddle
添加
输入的方式。突出显示
事件侦听器到
输入
元素

$("input").on("input.highlight", function() {
    ....
});

使回调函数仅由
input触发。突出显示已在DOM中的
input
s上的事件

如果要在动态添加到DOM的
input
s上触发回调，请尝试此操作：

$("body").on("input.highlight", "input", function() {
    ....
});

添加
输入的方式。突出显示
事件侦听器到
输入
元素

$("input").on("input.highlight", function() {
    ....
});

使回调函数仅由
input触发。突出显示已在DOM中的
input
s上的事件

如果要在动态添加到DOM的
input
s上触发回调，请尝试此操作：

$("body").on("input.highlight", "input", function() {
    ....
});

您需要有动态触发器事件。。看一看

替换你的

$("input").on("input.highlight", function() {

与


$（文档）.ready（函数（）{
//var max_fields=；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x<2）{//max允许输入框
x++；//文本框增量
$（包装器）。附加（“”）；
//添加输入框
}
});
$（“body”）.on（“input.highlight”，“input”，function（）{
//确定指定的搜索项
var searchTerm=$（this.val（）；
//突出显示特定上下文中的搜索词
$（“#上下文”）.unmark（）.mark（搜索术语）；
}).trigger（“input.highlight”）.focus（）；
});
标记{
背景：橙色；
颜色：黑色；
}

我要检查匹配项的一些文本
添加更多字段
您需要动态触发事件。。看一看

替换你的

$("input").on("input.highlight", function() {

与


$（文档）.ready（函数（）{
//var max_fields=；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x<2）{//max允许输入框
x++；//文本框增量
$（包装器）。附加（“”）；
//添加输入框
}
});
$（“body”）.on（“input.highlight”，“input”，function（）{
//确定指定的搜索项
var searchTerm=$（this.val（）；
//突出显示特定上下文中的搜索词
$（“#上下文”）.unmark（）.mark（搜索术语）；
}).trigger（“input.highlight”）.focus（）；
});
标记{
背景：橙色；
颜色：黑色；
}

我要检查匹配项的一些文本
添加更多字段