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

jQuery $(element) undefined whilst executing .click() method - returns element at all other times

本文关键字：element 其他 返回 时间 未定义 方法 jQuery 执行 click      更新时间：2023-09-26

一位同事遇到了一个非常奇怪的问题，我设法解决了这个问题，但我一生都无法理解为什么他的初始代码不起作用！-我们有一个遗留的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);

我观察到发生的事情似乎完全失去了上下文，或者在不同的上下文下一起执行事件。。。在处理click事件的过程中，div元素，或者HTMLdiv contentFrame中的任何元素都返回undefined。

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

点击事件有其正确的事件元素，我可以使用$（this）来获取我点击的按钮，但即使尝试在中选择$（"#myButton"），实际的点击事件处理程序代码本身也会返回"undefined"。

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

为了使此代码正常工作，我必须使用解决方法：

在点击事件处理程序中，使用以下内容：

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

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

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

提前感谢！

显示按钮的代码在哪里？

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

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

通过这种方式，您可以确保当jQuery尝试绑定点击事件时存在的元素（在本例中为文档），并且它只会在点击您指定为.on()调用第二个参数的过滤器时激发它，在本例中将是您的#myButton元素

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

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

通过这样做，您引用了最简单的"非动态生成"元素，jQuery将始终能够找到您的元素。

然后，您可以使用访问您的元素属性

$(this)
相关文章：