jquery隐藏jquery加载的div。

Question

我正在创建一个网站，并使用jquery发布表单。当我按submit按钮时，jquery函数将表单发布到php文件中。php文件会创建一个结果错误或成功。结果由php文件回显，jquery文件使用.html()方法输出回显。

我将html输出称为#result.。

因此，我的问题是如何使用#result jQuery隐藏。这得在5秒后发生。

当#result与页面一起加载时，这很好。但是当#result像上面所说的那样加载时，情况就不是这样了。

setTimeout(function(){ 
      $('#result').slideUp(500);  
}, 5000);

Answer 1

我认为最简单的方法是始终将空结果div放在html中，并将其隐藏起来。这样，无论何时从AJAX中获得结果，您都可以更改html，显示它，然后再将其向上滑动。

$("#result").html(AJAX RESULT);
$("#result").show();
setTimeout(function(){ 
      $('#result').slideUp(500);  
}, 5000);

这将改变div的html，然后显示它。5秒后把它藏起来。

Answer 2

您可以在成功回调选项中使用$.ajax，也可以使用.done()方法。示例：

$.ajax({
    url:"http://someurl/",
    success: function(data){ $('#result').html('success').show(); },
    error: function(data){ $('#result').html('error').show(); }
}).done(function(){
   setTimeout(function(){ 
       $('#result').slideUp(500);  
   }, 5000);
})

Answer 3

问题是#结果有时是动态添加到DOM中的，而jQuery函数通常是在文档准备就绪时加载的，要解决这个问题，必须听取DOM的更改。如果出于某些原因，您没有使用AJAX，或者需要其他方法，您可以尝试这样做：

function hideMsg(){
    // Hide dynamically added div
    setTimeout(function(){ 
          $('#result').slideUp(500);  
    }, 5000);
}
// Listen DOM changes
$('.document').bind("DOMSubtreeModified", hideMsg);

为了使其工作，您必须通过文档包装器更改.document (其中将显示您的消息)。

jsFiddle示例：http://jsfiddle.net/laelitenetwork/GUxgX/

干杯。