JQuery 和 Ajax：显示/隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12555202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery and Ajax: show/hide div
提问by Mario
I have this example.
我有这个例子。
When I click, a dynamic content load via Ajax. In the loaded page there is a link, that could close the div. It works, but when the div is closed (with hide()), the click on link don't reopen loaded page.
当我点击时，动态内容通过 Ajax 加载。在加载的页面中有一个链接，可以关闭 div。它有效，但是当 div 关闭时（使用 hide()），点击链接不会重新打开加载的页面。
Why? How can I create a button, that show/hide a div loaded with Ajax?
为什么？如何创建一个按钮，显示/隐藏加载了 Ajax 的 div？
Calling page :
呼叫页面：
<script type="text/javascript">
function getAjax(divdett,pageload) {
$(function(){$(divdett).load(pageload);});}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>click</title>
</head>
<body>
<a href="javascript:getAjax('#siteloader','jquery_divajax.htm');">click</a>
<div id="siteloader"></div>
</body>
Included page :
包含页面：
<script type="text/javascript">
function delAjax(divdett) {
$(divdett).hide();
}
</script>
OK!
<a id="#chiudi" href="#" onclick="delAjax('#siteloader');">chiudi</a>
回答by Denys Séguret
In your "close" button, you call hide().
在您的“关闭”按钮中，您调用hide().
Change your getAjaxfunction to this :
将您的getAjax功能更改为：
function getAjax(divdett,pageload) {
$(function(){$(divdett).load(pageload).show();});}
I just added .show()to ensure the div is visible even if it has been made hidden before.
我只是添加.show()以确保 div 可见，即使它之前已被隐藏。
Note that I respected the original construct but this is much too complex : no need to call $(functionwhen you can simply do
请注意，我尊重原始构造，但这太复杂了：$(function只需执行以下操作就无需调用
function getAjax(divdett,pageload) {
$(divdett).load(pageload).show();}
If you want to have only one button, you may remove the one of the second file and change the getAjax function to
如果你只想有一个按钮，你可以删除第二个文件中的一个并将 getAjax 函数更改为
function getAjax(divdett,pageload) {
var div = $(divdett);
if (div.is(':visible')) div.hide();
else div.load(pageload).show();
}
回答by Mr.OFF
I think it doesn't work because HTML DOM already loaded. For dynamic binding you need to use function .bind()or .live()(Documentation for bind()).
我认为它不起作用，因为 HTML DOM 已经加载。对于动态绑定，您需要使用函数.bind()或.live()（bind() 的文档）。
For example:
例如：
$( "#foo" ).bind( "click", function() {
$( this ).hide(); // or show();
});
回答by Bogdan
I would using an unobtrusive approach, separating the html from the javascript (jQuery) code, and like @dystroy very well pointed out, just show the div before the ajax request is made to make sure it's visible:
我会使用一种不显眼的方法，将 html 与 javascript (jQuery) 代码分开，就像@dystroy 指出的那样，只需在发出 ajax 请求之前显示 div 以确保它可见：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>click</title>
<script type="text/javascript">
$(function() {
$('#clickme').on('click', function(event) {
$('#siteloader').show().load('jquery_divajax.htm');
event.preventDefault();
});
$('#siteloader').on('click', '#chiudi', function(event) {
$('#siteloader').hide();
event.preventDefault();
});
});
</script>
</head>
<body>
<a id="clickme" href="">click</a>
<div id="siteloader"></div>
</body>
回答by Omi
well my answer may help you... giving you the scenario...
好吧，我的回答可能会帮助你......给你场景......
you can use if else in response of ajax request
您可以使用 if else 来响应 ajax 请求
$.ajax(
{
url:"ChkLogin.php",
type:"POST",
dataType: 'json',
data: {usernm: unm, passwrd: pass },
success:function(myoutput)
{
$(":hidden").val(myoutput.srno);
if(myoutput.flag=="1")
{
window.location="chat.php";
}
else
{
$("#msg").html("Invalid Login");
}
}
});
is response in 1 then do this else do this
是 1 中的响应，然后执行此操作，否则执行此操作
like....
喜欢....
if(myoutput.flag=="1")
{
$("#div").hide(4000);
}
else
{
$("#div").show(4000);
}
here 4000 are ms(milliseconds) takes to hide or show the DIV] Hope this will help you
这里 4000 是 ms(milliseconds) 隐藏或显示 DIV] 希望这会帮助你
