如果内容是通过JQuery提供的而不是硬编码的，则会出现div功能问题

Question

我的问题可能最容易从这个小提琴中解释出来：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>');
});

Answer 1

当您分配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树的更上层（可能是因为事件冒泡）并检查事件的目标来克服这个问题。

Answer 2

http://jsfiddle.net/L3zVY/8/您需要在jquery中使用live（）函数。