jQuery: Manipulating CSS

Question

I am trying to change the style of a button (which is really just a div). I can do it in CSS with .classname:active, but the button only changes style while it is being clicked; it doesn't maintain the style changes after the click is released. So, I decided to use jQuery to manipulate the CSS. It is worth noting that I am also using Bootstrap and Angular in my application.

HTML

<div class="subcontainer">
    <div class="center" data-container="body" popover-template="'popover-template.html'"> 
        {{instance}}
    </div>
</div>

jQuery

$(document).ready(function() {
    $(".subcontainer").click(function() {
        $(this).css("border", "1px inset gray");
    });
});

I have also tried using $(".subcontainer").on("click", function () { ... });, but to no avail. I looked at jQuery UI but I don't think it has a quick-fix solution to what I'm trying to achieve, so I'd like to stick with plain jQuery.

EDIT:

The code above works on all elements that aren't nested inside an ng-repeat. I'm trying to solve why it isn't working for those elements inside of an ng-repeat.

See https://stackoverflow.com/questions/31972784/injecting-jquery-into-angularjs-directive if you are trying to use inject jQuery into an AngularJS directive.

this doesn't answer your question, but the standard practice is to apply a css class using jquery, rather than applying specific css properties. so in your css file you could add a class called "clicked", where that class includes a 1px inset gray border, and then in your jquery use addClass or toggleClass to apply the "clicked" class to your element. this keeps your styling separate from your behavior logic. — Woodrow Barlow
– Woodrow Barlow, Commented Aug 11, 2015 at 14:58
i don't see what the problem is. when i replicate your code here, and click on the div, a border gets applied. — Woodrow Barlow
– Woodrow Barlow, Commented Aug 11, 2015 at 15:04
@WoodrowBarlow Yeah I see that it works in your fiddle. I'm not sure why it's not working in my app. I do have two jQuery files that I wrote. Perhaps I should combine them? Also, how would you get that added style to disappear on a second click? — UltraSonja
– UltraSonja, Commented Aug 11, 2015 at 15:25
the easiest thing to do is use toggleClass like i was saying above. example: jsfiddle.net/Ls8q00wn — Woodrow Barlow
– Woodrow Barlow, Commented Aug 11, 2015 at 15:34
as for your problem, it's probably an interaction with all the libraries and frameworks you're using. use your browser's inspector tools to determine where the conflict is coming from. — Woodrow Barlow
– Woodrow Barlow, Commented Aug 11, 2015 at 15:35

nurdyguy · Accepted Answer · 2015-08-11 15:09:26Z

1

The problem is the this pointer. Try this intead:

$(".subcontainer").click(function(e) {
    $(e.target).css("border", "1px inset gray");
});

This will pass the general event information into e, then you can get the target of the event using e.target.

EDIT: In Woodrow's comment above, you could do the same but use '.addClass('isactive')' instead of the direct css manipulation. The main benefit here is that it is easier to remove later using '.removeClass('isactive')'

edited Aug 11, 2015 at 15:09

answered Aug 11, 2015 at 15:06

nurdyguy

2,9433 gold badges28 silver badges33 bronze badges

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

1 Comment

Woodrow Barlow Over a year ago

using $(this) in the way the OP uses it is a well-known and often-used paradigm in jQuery. there's nothing wrong with the way that part of the code was originally written.

Nekresh · Accepted Answer · 2015-08-11 15:12:50Z

0

When you use Jquery with angular, the source code in your index page have to be Jquery first then angular like below:

<script src ="bower_components/jquery/dist/jquery.js"></script>
<script src ="bower_components/angular/angular.js"></script>

You need to use the $(".subcontainer") to angular.element('.subcontainer'). if not,you may have warning or error,when run "grunt serve".

hope it helps.

edited Aug 11, 2015 at 15:12

Nekresh

2,99825 silver badges28 bronze badges

answered Aug 11, 2015 at 15:08

li bing zhao

1,41814 silver badges12 bronze badges

Comments

Laky · Accepted Answer · 2015-08-11 15:14:51Z

try it like this;

html

<div class="subcontainer">
    <div class="center" data-container="body" popover-template="'popover-template.html'"> 
        BUTTON
    </div>
</div>

js using jquery

$( ".subcontainer" ).click(function() {

    $(this).addClass("green");

});

css

.subcontainer
{
    background-color:red;
    width:120px;
    height:auto;
    display:block;
}
.green
{
   background-color:green; 
}
.center
{
    padding:10px;
    text-align:center;
}

Here's the fiddle link

In the example I just change the button colour, but you can configure the dynamically setting class to have any style values as you like.

Community · Accepted Answer · 2017-05-23 12:14:37Z

0

You can change properties of a CSS class with AngularJS and CSS, no jQuery needed. See this for details. Note that you don't even need a controller like the OP has.

<div ng-class="{'gray-inset-border': style}">
    <div ng-click="style=!style">
        Content
    </div>
</div>

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Aug 18, 2015 at 16:08

UltraSonja

8911 gold badge20 silver badges33 bronze badges

Collectives™ on Stack Overflow

jQuery: Manipulating CSS

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Related