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

这是一个更新的小提琴Fiddle

Answer 2

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

的方式

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

使其成为回调函数仅由位于DOM中的input.highlight上的input事件触发。

如果要触发动态添加到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>

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

3 个答案: