jQuery $(element) 在执行 .click() 方法时未定义 - 在所有其他时间返回元素

Question

有一个同事面临的一个非常奇怪的问题，我设法解决了这个问题，但我一生无法理解为什么他的初始代码不起作用！ - 我们有一个传统的 asp.net Web 应用程序，它使用 MasterPages/Content 控件，并且在整个 Web 应用程序中混合了 jQuery，提供了一些客户端交互性。

本质上，有一个 Web 表单视图，其中有一个 div，其中包含一个最初隐藏的按钮（显示：无），单击另一个菜单项后，该 div 使用 jQuery BLOCKUI 插件显示，阻止 UI 的其余部分并呈现弹出 div 到位 - 然后用户可以单击按钮，单击按钮应该隐藏包含 div，并显示另一个包含另外两个按钮的 div - 一切都应该很简单....但这就是它变得时髦的地方：

请记住，这些内容都不是动态生成的，所有 HTML 元素都存在于页面加载完成后的 .aspx 视图中。

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

我观察到的情况似乎是完全失去了上下文，或者在不同的上下文中一起执行事件......在处理点击事件、div 元素或 HTML div 中的任何内容期间contentFrame 全部返回 undefined。

在任何其他时间，如果我使用控制台/调试器，我可以使用 $("#myButtonContainingDiv") 成功返回一个元素。

点击事件有其正确的事件元素，我可以使用 $(this) 来获取我点击的按钮，但甚至尝试 select $("#myButton") within实际的单击事件处理程序代码本身返回“未定义”。

我可以在任何时候完美地访问 $("anotherContentFrame")，包括在处理 #myButton 的点击事件期间。

为了让这段代码正常工作，我必须使用的解决方法是：

在单击事件处理程序期间，使用以下内容：

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

因为这是我获得对页面上 DOM 元素的任何引用以成功隐藏/显示它们的唯一方法。

如果有人愿意，我可以尝试提供更多信息，我不确定是否有人见过这样的问题。

提前致谢！

Answer 1

显示按钮的代码在哪里？

当您调用$(element).click() 时，它会尝试绑定到已加载的 DOM 上的元素（没有异步元素！）。如果您通过异步调用加载#myButton，则需要将单击绑定到父元素，然后将函数调用过滤到您的#myButton，如下所示：

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

这样，当 jQuery 尝试绑定单击事件时，您可以确定元素（在本例中为文档）存在，并且仅在单击您指定为 .on() 的第二个参数的过滤器时才会触发它在这种情况下，调用您的 #myButton 元素

Answer 2

你的事件没有触发是因为 jQuery 不知道元素，因为它的状态是动态变化的。为了确保触发您的点击事件，无论上下文如何，您都可以使用

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

这样做，您指的是最简单的“非动态生成”元素，jQuery 将始终能够找到您的元素。

然后您可以使用以下命令访问您的元素属性：

$(this)