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>