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';
    });
});