[英]I have a problem with javascript $ .get (URL, callback);
Thanks for the support! 感谢您的支持! - Sory, my english is bad! - 抱歉,我的英语不好!
I use this code to get the DOM component from the page entry to display on the homepage. 我使用此代码从页面条目中获取DOM组件以显示在主页上。 When I click on open-ajax
, it loads the DOM from the entrypage and display in ajax-outer
, when clicked on ajax-overlay
, it will delete the DOM. 当我单击open-ajax
,它将从条目页面加载DOM并显示在ajax-outer
,当单击ajax-overlay
,它将删除DOM。
But I discovered an error, if I clicked on an open-ajax link and clicked on ajax-overlay
immediately, get ()
will still load the DOM and display in ajax-outer
. 但是我发现了一个错误,如果单击打开的ajax链接并立即单击ajax-overlay
,则get ()
仍将加载DOM并显示在ajax-outer
。
It seems that ajax-overlay
is unable to stop get ()
How can I optimize the code? 看来ajax-overlay
无法停止get ()
如何优化代码?
Html from Homepage: 来自首页的HTML:
<div class="main_content">
<a class="open-ajax" href="/link/101">1</a>
...
<a class="open-ajax" href="/link/10n">n</a>
</div>
<div class="ajax-wrap">
<div class="ajax-overlay"></div>
<div class="ajax-outer"></div>
</div>
Html from Entry: 来自条目的HTML:
<div class="coupon_content">
<div class="abc">
....
</div>
</div>
Javascript: 使用Javascript:
$('.main_content').on('click', '.open-ajax', function(e) {
var gethref = $(this).attr('href');
e.preventDefault();
$('.ajax-wrap').addClass('active');
$.get(gethref, function(sch) {
$('.coupon_content', sch).each(function() {
$('.ajax-outer').append($(this).html());
$("body").addClass('noscroll');
});
});
});
$('.ajax-overlay').click(function(e) {
$('.ajax-wrap').removeClass('active');
$('.ajax-outer').children().remove();
$("body").removeClass('noscroll');
});
Ví dụ tương tự : https://dribbble.com/shots 视频: https ://dribbble.com/shots
You could hide the ajax-overlay
when you click open-ajax
and show it in the success callback, this way you make sure that the overlay will not be clicked until all the code is loaded: 您可以在单击open-ajax
时隐藏ajax-overlay
,并将其显示在成功回调中,这样可以确保在加载所有代码之前不会单击该覆盖:
$('.main_content').on('click', '.open-ajax', function(e) {
e.preventDefault();
var gethref = $(this).attr('href');
$('.ajax-wrap').addClass('active');
$('.ajax-overlay').hide();
$.get(gethref, function(sch) {
$('.coupon_content', sch).each(function() {
$('.ajax-outer').append($(this).html());
$("body").addClass('noscroll');
$('.ajax-overlay').show();
});
});
});
You can't prevent a ajax request but you can prevent the appending using a global variable 您不能阻止ajax请求,但是可以使用全局变量阻止附加
var canAppend = true;
$('.main_content').on('click', '.open-ajax', function(e) {
var gethref = $(this).attr('href');
e.preventDefault();
$('.ajax-wrap').addClass('active');
$.get(gethref, function(sch) {
if(canAppend) {
$('.coupon_content', sch).each(function() {
$('.ajax-outer').append($(this).html());
$("body").addClass('noscroll');
canAppend = true;
});
}
});
});
$('.ajax-overlay').click(function(e) {
$('.ajax-wrap').removeClass('active');
$('.ajax-outer').children().remove();
$("body").removeClass('noscroll');
canAppend = false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.