jQuery on event method doesn't trigger

Question

I want to remove background of input element on input event(any character), but that doesn't work

 $(document).ready(function() { $("#username").css("background-color", "red"); $("#password").css("background-color", "red"); $("#username").on("input", function() { $(this).css("background-color", "none"); $("#password").on("input", function() { $(this).css("background-color", "none");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="username" /> <input type="password" id="password" />

Answer 1

background-color:none isn't valid css. Also your password event binding was inside your username one.

 $(document).ready(function() { $("#username").css("background-color", "red"); $("#password").css("background-color", "red"); $("#username").on("input", function() { $(this).css("background-color", "transparent"); }); $("#password").on("input", function() { $(this).css("background-color", "transparent"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="username" /> <input type="password" id="password" />

Answer 2

You have some syntax errors where you forgot to close the functions you passed to on . none is also not valid for background-color , using initial is probably what you wanted.

 $(document).ready(function() { $("#username").css("background-color", "red"); $("#password").css("background-color", "red"); $("#username").on("input", function() { $(this).css("background-color", "initial"); }); $("#password").on("input", function() { $(this).css("background-color", "initial"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="username" /> <input type="password" id="password" />