问题描述
||
我的问题可能是从这个小提琴中最容易解释的:http://jsfiddle.net/L3zVY/7/
如果您单击框右上方的图像,则框会消失(图像不存在,因此只是一个问号)。
如果我尝试动态地操作这些框而不是对其进行硬编码,则由于某种原因会丢失此功能。
我这样做的原因是因为我有一个登录页面,该页面使用一个根据错误消息更改类的框。一切正常,除了能够关闭盒子...
有任何想法吗?
码:
$(document).ready(function() {
// Close notifications (fade and slideup)
$(\".notification a.close\").click(function () {
$(this).parent().fadeTo(400,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>\');
});
解决方法
http://jsfiddle.net/L3zVY/8/您需要将live()函数与jquery一起使用。
, 当您分配
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树上进一步绑定事件处理程序(由于事件冒泡而可能)并检查事件的目标来克服了此问题。