how to add a class to an element when i click a different element with jquery

Question

I have an input that is supposed to add a class of clicked to another element with an id of #zip when clicked. Here is the code:

$('#billing_zip').click(function () {
    $('#zip').addClass('clicked');
});

#zip {
    color: #444;
    font-style: italic;
    position: absolute;
    top: 8px;
    left: 35px
}
.clicked {
    display: none;
}

<div class="chkField">
        <label for="billing_zip">Zip</label>
        <input type="text" onchange="clearContent(this);check_address('billing');" class="txtBoxStyle hasPlaceholder" tabindex="10" size="10" value="" id="billing_zip" maxlength="15" name="billing_zip">
        <!--START: req_billing_zip--> 
        <img width="12" height="12" alt="" src="assets/templates/common/images/error2.gif"> 
        <!--END: req_billing_zip-->
        <div class="clear"></div>
        <div id="zip">zip</div>
      </div>

I don't know why the above jQuery is not working.

As far as I can see your code is working just fine. clicked class is getting applied. jsfiddle.net/8L5qdeu7 — Mangesh Parte
– Mangesh Parte, Commented Dec 5, 2014 at 4:30
don't forget to wrap your jquery code inside $(document).ready(function(){//Your Jquery Code//}); — Kartikeya Khosla
– Kartikeya Khosla, Commented Dec 5, 2014 at 4:31
add id='billing_zip' in label. You declare billing_zip as custom attribute(for). But you select it as id. — zanhtet
– zanhtet, Commented Dec 5, 2014 at 4:32
Its working Check Your files if jquery is loaded and its code placed properly — Suraj Rawat
– Suraj Rawat, Commented Dec 5, 2014 at 4:34

zanhtet · Accepted Answer · 2014-12-05 04:37:44Z

2

You forgot to declare id for billing_zip.

$(document).ready(function(){
$('#billing_zip').click(function () {
    alert('hi');
    $('#zip').addClass('clicked');
});
});

#zip {
    color: #444;
    font-style: italic;
    position: absolute;
    top: 8px;
    left: 35px
}
.clicked {
    display: none;
}

<div class="chkField">
        <label id="billing_zip" for="billing_zip">Zip</label>
        <input type="text" onchange="clearContent(this);check_address('billing');" class="txtBoxStyle hasPlaceholder" tabindex="10" size="10" value="" id="billing_zip" maxlength="15" name="billing_zip">
        <!--START: req_billing_zip--> 
        <img width="12" height="12" alt="" src="assets/templates/common/images/error2.gif"> 
        <!--END: req_billing_zip-->
        <div class="clear"></div>
        <div id="zip">zip</div>
      </div>

answered Dec 5, 2014 at 4:37

zanhtet

2,0497 gold badges37 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dave · Accepted Answer · 2014-12-05 04:46:44Z

0

Check out the jsfiddle here. Use document.ready if required. One important point i found out is that, if the placeholder text on input box is lengthy, then it covers up entire input box area and doesn't allow to trigger click event. refer the jsfiddle.

$('#billing_zip').click(function () { 
    $('#zip').addClass('clicked');
});

$('#zip').click(function () { 
    $('#zip').addClass('clicked');
});

edited Dec 5, 2014 at 4:46

answered Dec 5, 2014 at 4:39

Dave

4,4463 gold badges27 silver badges38 bronze badges

Comments

ianaya89 · Accepted Answer · 2014-12-05 04:35:23Z

0

Your code is working OK

It could be 2 possible issues:

You are missing to add the jQuery reference:
You should wrap your code inside the document.ready event:

$(function(){ $('#billing_zip').click(function () { $('#zip').addClass('clicked'); }); });

answered Dec 5, 2014 at 4:35

ianaya89

4,2613 gold badges29 silver badges34 bronze badges

Comments

user254153 · Accepted Answer · 2014-12-05 04:43:14Z

0

If this only what you want. Then you can do directly like:

$('#billing_zip').click(function () {
    $('#zip').css("display","none"); // or you can use hide or fadeout property.
});

answered Dec 5, 2014 at 4:43

user254153

1,8936 gold badges44 silver badges88 bronze badges

Comments

ladamesny · Accepted Answer · 2014-12-05 04:48:54Z

0

When I wrapped your jQuery code in a "$(document).ready" it worked:

$(document).ready(function(){
  $('#billing_zip').click(function () {
   $('#zip').addClass('clicked');
 });
});

answered Dec 5, 2014 at 4:48

ladamesny

11 bronze badge

Collectives™ on Stack Overflow

how to add a class to an element when i click a different element with jquery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related