Home/ Questions/Q 8996991
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T23:49:42+00:00

I have a jQuery function inside .click and it does not work. I have

  • 0

I have a jQuery function inside .click and it does not work. I have tested the jQuery and it’s working but have tried multiple combinations as tests inside the .click and things aren’t working correctly for some reason. The console is blank and states there are no erros. It does say, however, that it can’t find any of my defined variables…

html:

<body>
    <section id="container_header">
        <header>
            <nav>
                <a id="home">Home</a>
                <a id="about">About</a>
                <a id="work">Work</a>
                <a id="contact">Contact</a>
            </nav>
        </header>
    </section>
    <section id="container_content">
        <div class="section" id="section-home"></div>
        <div class="section" id="section-about"></div>
        <div class="section" id="section-work"></div>
        <div class="section" id="section-contact"></div>
    </section>

With CSS I am rendering the empty divs and they show properly. Now for the js:

        $(function(){
            $(this).click(function(){
                var pid = $(this).attr("id"); //console says this var is not defined???
                $(this).hide(); //even this does not work???
                //$("div[id^=section-]").hide(); //this works just fine???
                //$(this).closest("#container_header").hide(); //not working???
                //$(this).closest("body").find("#section-" + pid).show(); //no likey???
                //alert("h"); //works
            });
        });

Comments above describe things that work and things that doen’t. It’s probably something stupid but I can’t see it. And yes, while testing I’m removing the comments before trying them.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Within a ready handler, this is bound to the document itself. Since you wrote:

    $(function() {
    $(this).click(function() {  // Here, 'this' is 'document'.
        var pid = $(this).attr("id");
        $(this).hide();
    }
});

    You’re trying to fetch the id attribute of the document, which does not exist, then to hide the document itself, which cannot be achieved.

    Try matching the <div> elements that expose the section class instead:

    $(function() {
    $("div.section").click(function() {
        var pid = $(this).attr("id");
        $(this).hide();
    }
});
    • 0