如果内容通过 JQuery 提供且未硬编码，则会出现 div 功能问题

发布于 2024-11-10 11:34:03 字数 798 浏览 4 评论 0原文

我的问题可能最容易从这个小提琴中解释： http://jsfiddle.net/L3zVY/7/

如果单击框右上角的图像，框就会消失（图像不存在，因此只是一个问号）。

如果我尝试动态操作这些框而不是对它们进行硬编码，那么此功能会因某种原因丢失。

我这样做的原因是因为我有一个登录页面，使用一个根据错误消息更改类的框。除了能够关闭盒子之外，一切正常......

有什么想法吗？

代码：

$(document).ready(function() {
// Close notifications (fade and slideup)

        $(".notification a.close").click(function () {
            $(this).parent().fadeTo(400, 0, function () {
                $(this).slideUp(200);
            });
            return false;
        });


// JQuery Broken Notification:
    $("#msgbox1").html('Broken :( <a href="#" class="close"><img src="images/notification_close.png" alt="close" /></a>');

});

原文

My problem is probably easiest explained from this fiddle: http://jsfiddle.net/L3zVY/7/

If you click the image in the top right of the box, the boxes fade away (image isn't present so it's just a question mark).

If I try and dynamically manipulate these boxes instead of them being hardcoded then this functionality is lost for some reason.

The reason I am doing it this way is because I have a login page using a box that changes class depending on the error message. Everything works fine except for being able to close the box...

Any ideas?

Code:

$(document).ready(function() {
// Close notifications (fade and slideup)

        $(".notification a.close").click(function () {
            $(this).parent().fadeTo(400, 0, function () {
                $(this).slideUp(200);
            });
            return false;
        });


// JQuery Broken Notification:
    $("#msgbox1").html('Broken :( <a href="#" class="close"><img src="images/notification_close.png" alt="close" /></a>');

});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一影成城 2024-11-17 11:34:03

当您分配 click 处理程序时，您插入的元素尚不存在，因此 jQuery 无法找到它。

首先插入元素：

$(document).ready(function() {
    $("#msgbox1").html('...');
    $(".notification a.close").click(...);
});

或使用 .live() / .delegate()：

$(document).ready(function() {
    $(".notification").delegate('a.close', 'click', function(){...});
    $("#msgbox1").html('...');
});

事件处理程序始终绑定到元素。你不能将任何东西绑定到不存在的东西上。 live/ delegate 通过在 DOM 树上进一步绑定事件处理程序来克服这个问题（可能是因为 事件冒泡）并检查事件的目标。

When you assign the click handler, the element you insert does not exist yet, hence jQuery cannot find it.

Either insert the element first:

$(document).ready(function() {
    $("#msgbox1").html('...');
    $(".notification a.close").click(...);
});

or use .live() / .delegate():

$(document).ready(function() {
    $(".notification").delegate('a.close', 'click', function(){...});
    $("#msgbox1").html('...');
});

Event handlers are always bound to the element. You cannot bind anything to something that does not exist. live/ delegate overcome this problem by binding an event handler further up the DOM tree (possible because of event bubbling) and checking the target of the event.

回复收藏 0 原文