CODEWITHSUNDEEP
jquerycssshow-hide
Adam Morris
Adam Morris

Reputation: 8545

jQuery hide / show class not changing css for future added elements

How can I change the css using jQuery such that it takes effect for future elements as well? I have an issue where I'm using $().show() to toggle the display on some elements, but then I append new elements with the same class, and they remain hidden.

<style type="text/css">
  .visibleState { display: none; }
</style>
<script>
  $('.visibleState').show();
  $('#appendHere').html('<div id="second" class="visibleState">* Second is NOT? visible</div>');
</script>

This has probably been asked, but I can't find it. I tried using live() in different ways, but that didn't seem to work. What's the right way to do this?

Example: http://jsfiddle.net/amorris/wykhv/

Upvotes: 0

Views: 1894

Answers (6)

Derek
Derek

Reputation: 4751

I try to avoid using .show() and .hide() except in extremely simple cases. Instead, use classes with default and other wanted behavior. So your have your .visibleState class, and .visibleState.show { display:block; }

<style type="text/css">
  .visibleState { display: none; /* default hidden */ }
  .visibleState.show { display: block; }
</style>
<script>
  $('.visibleState').addClass('show');
  $('#appendHere').html('<div id="second" class="visibleState show">Second is NOW visible</div>');
</script>

Although I'd change your 'visibleState' class to something more semantically applicable, like 'defaultState'.

The way you are doing it now will not work because the function call of .show() hasn't been applied to your #second element.

Upvotes: 1

jwaliszko
jwaliszko

Reputation: 17074

You can define some flag and change its value when show event is invoked:

var fired = false;
$('.visibleState').show(function(){
    fired = true;
});

After that, while you are sure the show event has finished, you can set up visibility of newly created elements based on this flag state:

$('#appendHere').html('<div id="second" class= "visibleState"' + (fired ? " style=\"display: block\"" : "") + ') >* Second is visible</div>');

Upvotes: 1

James Montagne
James Montagne

Reputation: 78690

The easiest way would probably be to have a containing parent which you add and remove a class from. For example:

.shown .child{
    display: block;
}

.hidden .child{
    display:none;
}

<div id="parent" class="hidden">
    <div class="child"></div>
</div>

$("#parent").removeClass("hidden").addClass("shown")
    .append("<div class='child'>this will now be shown</div>");

Any number of different css rules can be used in place of just showing and hiding.

Working example: http://jsfiddle.net/xJ2Gh/

Upvotes: 1

Vasyl Senko
Vasyl Senko

Reputation: 1825

Look at this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
.classname {
 color: red;
 font-size: 14px;
}
</style>
<script type="text/javascript">
window.onload = function() {
    document.getElementById("button").onclick = function() {
        var ss = document.styleSheets;

        for (var i=0; i<ss.length; i++) {
            var rules = ss[i].cssRules || ss[i].rules;

            for (var j=0; j<rules.length; j++) {
                if (rules[j].selectorText === ".classname") {
                    rules[j].style.color = "green";
                }
            }
        }
    };
}
</script>
</head>
<body>

<h1 class="classname">Some red text</h1>

<button id="button">Make text green</button>

</body>
</html>

Upvotes: 1

daveyfaherty
daveyfaherty

Reputation: 4613

Just change the js, so it's inline.

  $('#appendHere').html('<div id="second" class="visibleState" style="display: block;">* Second is NOT? visible</div>');

The inline style over-rides the style in the head, or in the stylesheet for that matter.

That's all that show() really does anyway. Show and hide add and remove inline styles for the display property. Perhaps the visibililty property too, anyone?

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129802

This is not how live works. $('.visibleState').show(); will find all (currently existing) elements with the visibleState class, and show them. It does not alter the CSS rules of the visibleState style itself.

You could access these rules manually by tapping into document.styleSheets.

Upvotes: 3

Related Questions