html5 - Check with jQuery if a value in an input element was entered -

first of all, checked every topic similar problem, unfortunately, haven't found answer yet. tried combine of anwers, had no succes. (note: started learn jquery)

so here problem:

i created form 4 text inputs , button. each input has svg icon inside , placeholder text.

html:

<div class="first-field"> <input class="text" type="text" placeholder="uw naam.." value=""> <svg class="unfilled" id="svg_user"> </svg> </div> 

(i removed svg data since it's irrelevant.)

the svg icon same color placeholder. entered text color bit lighter. want change color of svg icon same color entered text, when entered.

first tried fire alert when entered, check if knows when entered. used example jquery website :

$( ".text" ).change(function() { alert( "handler .change() called." ); }); 

this did not work and, accordingly documentation, should.

i found solution on stack, won't work:

$(document).ready(function () { $('.text').keyup(function () { alert('test'); }); }); 

without alert, can't continue building towards solution. quick summary:

svg icon needs change same color entered text, when entered. when deleted should change color of placeholder text.

for now, thank help.

the reason need wrap code in document.ready wrapper, because code wants run instantly, moment loaded. usually, code runs before dom has been created (i.e. page has been rendered) -- of elements code needs access not there yet -- , code breaks.

here example of using document.ready wrapper:

html:

<div class="first-field">     <input class="text" type="text" placeholder="uw naam.." value="" />     <svg class="unfilled" id="svg_user"></svg> </div> 

javascript/jquery:

var ran=0; $(document).ready(function() {      $('.text').keyup(function(e) {          if (ran == 0){             ran++;             alert('test');         }     });  }); //end document.ready 

working jsfiddle

---

however, if html has been injected via javascript or through ajax (via .load()) or that, user events not trigger code run.

in case, there simple solution: use jquery's .on() method.

var ran=0; $(document).ready(function() {      $(document).on('keyup', '.text', function(e) {          if (ran == 0){             ran++;             alert('test');         }     });  }); //end document.ready 

the above small change:

$(document).on('keyup', '.text', function(e) {  

binds event handler document itself, , tells watch keyup events involving element class .text.

modified jsfiddle

one of should work fine.

---

notice example constructed includes check keyup action not performed more once. can remove , have code every keypress:

$(document).ready(function() {      $('.text').keyup(function(e) {          alert('test');     });  }); //end document.ready