Css jquery live()单击函数:未删除类
我正在使用jQuery在提交表单后显示一条成功消息。该表单是使用wordpress插件联系表单7创建的。类Css jquery live()单击函数:未删除类,css,jquery,removeclass,Css,Jquery,Removeclass,我正在使用jQuery在提交表单后显示一条成功消息。该表单是使用wordpress插件联系表单7创建的。类wpcf7 mail sent ok由插件ajax提交脚本动态添加。我试图让它,当用户点击的消息,它淡出,然后出现。由于某种原因,removeClass方法不起作用 有人知道为什么它不起作用吗?当我使用“alert()”调用对其进行测试时,timeout函数确实在工作。谢谢你的帮助 PS。。。我使用较少的css,这就解释了这里发布的css中的.opacity()语法 HTML: 它不起作用,
wpcf7 mail sent ok
由插件ajax提交脚本动态添加。我试图让它,当用户点击的消息,它淡出,然后出现。由于某种原因,removeClass方法不起作用
有人知道为什么它不起作用吗?当我使用“alert()”调用对其进行测试时,timeout函数确实在工作。谢谢你的帮助
PS。。。我使用较少的css,这就解释了这里发布的css中的.opacity()语法
HTML:
它不起作用,因为在定义函数
remove
时,$sent
的值已经被确定为不匹配任何元素的jQuery对象。这是因为只要你一写,匹配就会发生
var $sent = $('.wpcf7-mail-sent-ok ');
此时还没有“邮件已发送”元素
解决此问题的最简单方法是在remove
中重新评估选择器:
function remove() {
$('.wpcf7-mail-sent-ok').hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
}
function remove(el) {
$(el).hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
}
$sent.live("click", function(){
$(this).addClass('hide');
setTimeout(function() { remove(this); },400)
});
另一种解决方案是在单击处理程序中使用this
,并将其作为参数传递给remove
:
function remove() {
$('.wpcf7-mail-sent-ok').hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
}
function remove(el) {
$(el).hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
}
$sent.live("click", function(){
$(this).addClass('hide');
setTimeout(function() { remove(this); },400)
});
当然,最好只使用jQuery的内置功能,并完全去掉remove
:
$sent.live("click", function(){
$(this).addClass('hide')
.delay(400)
.hide(0) // need to pass 0 as a parameter
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
});
我没有看到任何代码使元素淡出。它不起作用的原因与@Jon提到的相同。您可以尝试使用匿名函数,在函数的内部,
此
将指向触发单击
的元素。试试这个
$('.wpcf7-mail-sent-ok ').live("click", function(){
var $this = $(this).addClass('hide');
setTimeout(function(){
$this
.hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style')
},400)
});
谢谢你的回答,shankar。淡出代码在CSS中,以CSS不透明的形式出现transition@j-男人86-我曾经想你一定是通过CSS:P来做的