jQuery (highlight text after creating input)

Question

I'm very new to jQuery and js. Here is question. I need to create a button which adds an input field and then highlights all expressions in given text matching with text in input. I have no problem with adding new input field. I also found solution for highlighting areas in text. The problem is I can't combine these 2 things in one. So I have following: if there is already input field on page and I type smth here, the matching parts from text are highlighted. But if i use button to add new input field and then type anything there, there is no highlight. Question may be quite silly, so can you at least tell me where exactly I can read about it? I'm really new here and have no clue why it's happening. 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

Use (document).on for dynamically created elements like so:

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

Here is an updated fiddle Fiddle

Answer 2

The way you add the input.highlight event listener to the input elements

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

Make it so that the callback function will only be triggered by input.highlight events on input s that are already in the DOM.

Try this if you want to trigger the callback on input s that are dynamically added to the DOM:

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

Answer 3

you need to have dynamic trigger event.. have a look over..

Replace your

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

with

 $("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>