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


Tags: jquery,css,show-hide

Problem :

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/



Solution :

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>

    CSS Howto..

    jQuery: accordion-LIKE format. how to prevent div from collapsing if one of the checkboxes is checked

    How To Turn JS Objects To HTML And Style With CSS

    How to get parent DIV width and set child DIV width

    How to Create hidden CSS?

    How to find which CSS files are used for current page

    How can I move all my CSS box shadows back under div

    How to make an image display above the background of an :after element

    How to count the number of correct answers using Javascript?

    How to write CSS for parent DIV needing height dictated by child DIVs that are also anchored bottom?

    How to get border radius and gradient background working together in IE 9

    How to position div so that it renders outside container

    How are URLs handled inside the CSS file in CakePHP so they reference the correct location?

    How to make a content div stretch from a header div to a footer div?

    Coding the slideshow

    How to formatting a simple
      in columns and bolding the first item on its own line

    How to add or create an illusion of movement to a fixed div?

    How to position main content below header and footer in css

    How to enable links if a parent element uses a fullscreen pseudo-element?

    (css) how to display a div up as compared to the other divs

    How to remove an element from the flow of HTML/CSS?

    How to load CSS in Django templates?

    How do I apply CSS Transition to my responsive menu?

    How do I get this CSS text-decoration override to work?

    How to set a width of the background (HTML and CSS)

    Responsive CSS layout - how to stretch the background overlay

    How do align images vertically centers with CSS and HTML?

    How to Fix: iOS drops CSS files when javascript changes DOM

    How can I make one item with its own class a different colour from others?

    How to hide grey scrollbars on a DIV in Android - they only show when you cannot scroll

    How to Flip Div's in Randomly