Have a really strange issue that a colleague was facing which I managed to work around, but for the life of me cannot understand why his initial code did not work! - we have a legacy asp.net web application that is using MasterPages/Content controls and has jQuery mixed all over the web application providing some client interactivity.

Essentially there is a web form view that has a div containing a button which is initially hidden (display: none), upon clicking another menu item, this div is shown using jQuery BLOCKUI Plugin, blocking the rest of the UI and rendering the popup div into place - the user can then click the button, clicking the button should hide the containing div, and show another div that contains another two buttons - all should be simple.... but this is where it got funky:

Bear in mind none of this content is dynamically generated, all HTML elements are present within the .aspx view up front after the page is finished loading.

 var blockUiRenderFrame = function (html, width, height) {
        window.parent.$.blockUI({
            message: html,
            css: {
                top: ($(window.parent).height() - height) / 2 + 'px',
                left: ($(window.parent).width() - width) / 2 + 'px',
                width: width
            }
        });
    };

<div id="anotherContentFrame">
    <p>some text</p>
</div>

<div id="contentFrame" style="display:none;">
    <div id="myButtonContainingDiv">
        <button id="aButton" />
    </div>
    <div id="myOtherButtonsContainingDiv"></div>
</div>

$(document).ready(function() {
    $("#myButton").click(function() {
        $("#myButtonContainingDiv").hide();
        $("#myOtherButtonsContainingDiv").show();
    });
});

<!-- A Button on the page calls this code -->
blockUiRenderFrame($("#contentFrame"), 200, 200);

What I observed occurring was what appears to be a complete loss of context, or executing the event under a different context all together... during the handling of the click event, the div elements, or indeed anything within the HTML div contentFrame all return undefined.

At any other time if I use the console/debugger, I can successfully return an element using say $("#myButtonContainingDiv").

The click event has its correct event element, I can use $(this) to get the button I clicked on, but even trying to select $("#myButton") within the actual click event handler code itself returns 'undefined'.

I can access $("anotherContentFrame") perfectly fine, at any time, including during the handling of the click event of #myButton.

The workaround I had to use in order to get this code to work was:

During the click event handler, use the following:

$(this).closest('div').hide()
$(this).closest('div').next().show()

As this was the only way I could get any reference to the DOM elements on the page to successfully hide/show them.

I can try to give out some more information if anyone wishes, I am not sure if anyone has ever seen an issue like this.

Thanks in advance!

Where's the code showing your button?

When you call $(element).click() it will try to bind to your element on the DOM that is already loaded (no async elements!). If you're loading the #myButton via a async call, you need to bind the click on a parent element and then filter the function call to your #myButton like this:

$(document).on('click', '#myButton', function(){});

This way you're sure that the element (in this case, document) existing when jQuery tries to bind the click event and it will only fire it when clicking on the filter you specified as the 2nd parameter to the .on() call, in this case, your #myButton element