Question

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

基本上有一个web表单视图，其中包含一个最初隐藏的按钮（显示：无），在单击另一个菜单项时，使用jQuery BLOCKUI插件显示此div，阻止其余UI和渲染popup div到位 - 然后用户可以单击按钮，单击按钮应隐藏包含div，并显示另一个包含另外两个按钮的div - 所有应该都很简单....但这是它变得时髦的地方： / p>

请记住，这些内容都不会动态生成，所有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元素或HTML div中的任何内容时contentFrame all return undefined。

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

click事件有正确的事件元素，我可以使用$（this）来获取我点击的按钮，但是甚至尝试在中选择$（“＃myButton”）实际的点击事件处理程序代码本身返回'undefined'。

我可以随时访问$（“anotherContentFrame”），包括在处理#myButton的点击事件期间。

我必须使用解决方法才能使此代码正常工作：

在click事件处理程序中，使用以下命令：

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

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

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

提前致谢！

Answer 1

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

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

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

然后，您可以使用以下方式访问元素属性：

$(this)

Answer 2

显示按钮的代码在哪里？

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

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

这样你肯定jQuery尝试绑定click事件时存在的元素（在本例中是文档），它只会在你指定为{{1的第二个参数时指定的过滤器时触发它在这种情况下，调用您的.on()元素

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

2 个答案: