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

Question

我对jQuery和js非常陌生。 这是问题。 我需要创建一个添加输入字段的按钮，然后突出显示与输入中的文本匹配的给定文本中的所有表达式。 添加新的输入字段没有问题。 我还找到了突出显示文本区域的解决方案。 问题是我无法将这两件事合二为一。 因此，我有以下内容：如果页面上已经有输入字段，并且在此处输入smth，则会突出显示文本中匹配的部分。 但是，如果我使用按钮添加新的输入字段，然后在其中输入任何内容，则不会突出显示。 问题可能很愚蠢，所以您至少可以告诉我我在哪里可以确切地了解到它？ 我真的很新，不知道为什么会这样。 https://jsfiddle.net/0on93vrv/1/

$(document).ready(function() {
//var max_fields      = ; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < 2){ //max input box allowed
       x++; //text box increment
    $(wrapper).append('<div><input id="input" type="text" name="mytext[]"/>     </div>');
    //add input box
   }
});
$("input").on("input.highlight", function() {
// Determine specified search term
var searchTerm = $(this).val();
// Highlight search term inside a specific context
$("#context").unmark().mark(searchTerm);
}).trigger("input.highlight").focus();
});

Answer 1

将(document).on用于动态创建的元素，如下所示：

$( 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();
});

这是更新的小提琴

Answer 2

将input.highlight事件侦听器添加到input元素的方式

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

使得回调函数将仅由DOM中已经存在的input的input.highlight事件触发。

如果要触发动态添加到DOM的input的回调，请尝试以下操作：

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

Answer 3

您需要具有动态触发事件。

更换您的

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

同

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

 $(document).ready(function() { //var max_fields = ; //maximum input boxes allowed var wrapper = $(".input_fields_wrap"); //Fields wrapper var add_button = $(".add_field_button"); //Add button ID var x = 1; //initlal text box count $(add_button).click(function(e){ //on add input button click e.preventDefault(); if(x < 2){ //max input box allowed x++; //text box increment $(wrapper).append('<div><input id="input" type="text" name="mytext[]"/></div>'); //add input box } }); $("body").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(); }); 

 mark { background: orange; color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script> <input type="text" value="test"> <div id="context"> Some text which i want to check for matches </div> <div class="input_fields_wrap"> <button class="add_field_button">Add More Fields</button> <div class="color_input"><input type="text" name="mytext[]"></div> </div>