点击（）事件jQuery答案

【问题标题】：click() event jquery点击（）事件jQuery
【发布时间】：2012-03-23 15:01:28
【问题描述】：

所以我有这段代码，它在 AJAX 请求之后在 print_info() 函数中调用；

'print_info' : function(message,type) {
        $('.load').hide();
        $('<div>'+message+'</div>').insertAfter('#loader').addClass('autoHideBox '+type).fadeIn("slow").delay(2000).fadeOut("slow", function() { $(this).remove(); });
    },

如您所见，div 会在几秒钟内淡入淡出，我的问题是，即使我添加了这段代码：

.click(function() { $(this).fadeOut("slow", function() { $(this).remove(); }); } )

div 根本不会淡出/移除。你能清除这个吗？因为我对这件事有点困惑。

问候，杜鲁曼埃迪

后期编辑：

我让它与 .on("click", callback) 一起使用，但是，在回调中淡出并删除它是行不通的。

所以，为了让它正常工作，你可以在 on("click" 的回调中做任何你需要做的事情，只需在 .on() 之前添加 stop(true,true).on("click" ",回调);

'print_info' : function(message,type) {
        $('.load').hide();
        $('<div>'+message+'</div>')
            .insertAfter('#loader')
            .addClass('autoHideBox '+type)
            .fadeIn("slow")
            .delay(2000)
            .fadeOut("slow", function() { $(this).remove(); })
            .on('click', function() {
                $(this).stop(true,true).fadeOut("slow", function() { $(this).remove(); })
            });
    },

【问题讨论】：

标签： jquery events click

【解决方案1】：

我认为问题在于.click 只能附加到最初在页面加载时加载的元素。

由于您当时创建了元素，因此它没有正确附加到点击事件。尝试改用.on('click', callback)，因为它可以添加到页面加载后动态创建的任何内容中。

http://api.jquery.com/on/

【讨论】：

简单的不影响 div 的回调与 on("click",callback) 一起工作，但是为了解决回调问题，只需在 .on(" 之前插入 .stop(true,true) click",callback)，在第一篇文章中进行了编辑，以便其他人也可以看到。

【解决方案2】：

您应该使用 .live('click', 动态添加内容的函数。

【讨论】：

.live 不起作用，只是让您知道，使用 .on("click", callback);
.live 不起作用，因为它已被弃用，您可能正在使用最新版本的 jquery

【解决方案3】：

这对我有用：

$(document).ready(function () {
     var div = $('<div>This is a test</div>');
     div.insertAfter('#test');
     div.click(function () { 
       div.fadeOut("slow", function() { div.remove(); }); 
     });
   });

【讨论】：

尝试在你的点击函数前添加fadeIn/fadeOut，你会发现它不起作用。无论如何，你有“文档准备功能”，我们正在使用实时 div，它们不是与 DOM 同时添加的。