CSS class is missed after jQuery replaceWith. How to fix?


Tags: javascript,jquery,css,.net

Problem :

I added this line to a master.cs page.

<h4 class="hideAndShow">[ - ] Hide</h4>

In CSS file:

.hideAndShow
{
    position: fixed;
    top:120px;
    right:420px;
    color: white;
    background-color:green;
}

Then this in the same master.cs page.

        <script>
            var hideShowBool = true;

            $('.hideAndShow').bind('click', function ()
            {
                if (hideShowBool == true)
                {
                    $(this).replaceWith('<h4 class="hideAndShow">[ + ] Show</h4>');
                    hideShowBool = false;
                } else
                {
                    $(this).replaceWith('<h4 class="hideAndShow">[ - ] Hide</h4>');
                    hideShowBool = true;
                }
            });
        </script>

The expected behavior: The text [ - ] Hide should toggle between: [ + ] Show and [ - ] Hide.

But what happens is that it only responds to the very first click. In that [ - ] Hide is replaced with [ + ] Show. But when clicking it again; there is no effect as expected.

Where is the problem? and How to fix it?



Solution :

That's because you are replacing the element, so the new element doesn't have any click handler bound to it. You can either use the event delegation technique:

$('#aStaticParentElement').on('click', '.hideAndShow', function () {

Or change the text content of the element instead of replacing it:

$('.hideAndShow').on('click', function() {
    $(this).text(function(_, currentText) {
        return currentText === '[ + ] Show'
               ? '[ - ] Hide'
               : '[ + ] Show';
    });
});

    CSS Howto..

    css/html, how to scale and center a logo image

    Truncate text in floated box and show it entirely when hovering

    How make to flow around a triangular block?

    How to program a CSS3/JQuery/Flexslider carousel with visible sides

    How to add space between border line and menu item

    How to have one div overlap two other divs?

    How to make a function set css width with a JavaScript variable?

    How to make navigation bar of pure css slider?

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

    How to keep an :active css style after clicking a link?

    CSS: How to move contents of one div into another one

    How to reverse the text with js/css? [duplicate]

    Show bootstrap glyphicon in link when hovering

    How to override a 's CSS when loaded by ajax?

    CSS: how to create a fixed top header with a fixed width

    CSS - How to create diagonal emboss?

    how to minify css file containing @page

    How to catch div position and reposition it later (on MAC)

    How to create a css rule for all elements except one class?

    How to remove dotted border around active hyperlinks in IE8 with CSS

    How do I have a border-bottom on all except the last item

    how to change the color of disabled controls

    Font-awesome not properly displaying on Firefox / how to vend via CDN?

    How to parse css (stylesheet) comments (annotations)?

    Creating a web page plugin. How to include css and render elements?

    How to make menu fold like paper using CSS?

    How do I make a nested
    expand to its contents?

    How to get cropped image with gray/ sepia in my editor.?

    how to properly use CSS Class and ID [closed]

    How to make child element do not fill his parent when hover is performed in CSS?