仅更改背景颜色

Question

I want to be able to change the color of the form background color when clicked, but instead if i even click inside the form input box it also changes the form background.

$('form').on('focus', 'input', function(e) {
    $(this).addClass('change');
  })

Answer 1

 $(document).on('click', 'input', function(e) { e.stopPropagation(); // this will prevent the bubble up to the click of form }).on('click', 'form', function(e) { $(e.currentTarget).toggleClass('change'); }) 

 form { height: 150px; width: 300px; background-color: #ccc; text-align: center; padding: 20px; } .change { background-color: lightgreen; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label for="input"> Input <input type="text" value="" name="input" /> </label> </form> 

Answer 2

You can class your input and then check if user hasn't click in it, check it out:

 $("form").click(function(e) { if(e.target.className != 'inputtext') { $(this).toggleClass('change'); } }) 

 form { background: yellow; } .change { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form"> First name:<br> <input type="text" name="firstname" class="inputtext"><br> Last name:<br> <input type="text" name="lastname" class="inputtext"> </form> 

http://jsfiddle.net/UKhAn/167/