gpt4 book ai didi

javascript - ajax加载脚本不工作

转载 作者:行者123 更新时间:2023-11-28 09:14:43 25 4
gpt4 key购买 nike

嗨,小伙子仍然遇到问题..所以尽管重新写下问题。将我的外部页面放入我的索引页上的 div 中.. 很棒.. 但似乎无法让 java 脚本工作.. 我可以使用它让它们工作一次..

     <script>
$.ajax({
url: "pages/index.php",
dataType: "html",
success: function(html) {
var target = $('.fademe');
var targetHeight = target.outerHeight();
$(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});
}
});
</script>

但是当我转到不同的页面并返回时它不起作用...我将脚本放在主索引页面的底部

<script>
$.ajax({
url: "pages/index.php",
dataType: "html",
success: function(html) {
$('#st-accordion').accordion();
};
});

</script>

<script>
$.ajax({
url: "pages/index.php",
dataType: "html",
success: function(html) {
$('#st-accordion2').accordion();
}
});

</script>


<script>
$(function () {
$.scrollUp();
});
</script>

<!-- Fade Top Panel -->
<script>
$.ajax({
url: "pages/index.php",
dataType: "html",
success: function(html) {
var target = $('.fademe');
var targetHeight = target.outerHeight();
$(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});
}
});
</script>

<script>

$ajax({
url: "pages/index.php"
dataType: "html",
success: function(html) {
$('#submit').click(function(){
$.post("send.php", $("#mycontactform").serialize(), function(data) { });
$('#success').html('Message sent!');
$('#success').hide(2000);


$('#name1').val('');
$('#telephone').val('');
$('#email').val('');
$('#message').val('');

});
}


});




</script>

<!-- Viberating Icons -->


<script>

$(function() {
var interval = 10;
var duration= 1000;
var shake= 3;
var selector = $('.viberate'); /* Your own container ID*/
$(selector).each(function(){
var elem = this;
var vibrateIndex;
var timeoutIndex;
$(this).hover( /* The button ID */
function(){
vibrateIndex = setInterval(function(){
vibrate(elem);
}, interval, 0);
timeoutIndex = setTimeout(function()
{clearInterval(vibrateIndex)},1000);
},
function(){
clearInterval(vibrateIndex);
clearTimeout(timeoutIndex);
}
);
})

var vibrate = function(elem){
$(elem).stop(true,false)
.css({position: 'relative',
left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px',
top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
});
}
});

</script>

最佳答案

最好先加载 JS/CSS,然后只加载动态信息。

在这种情况下,您将缓存 JS/CSS 和小响应。这意味着更好的性能。

当然不要加载 <html><head>...</head>部分。每页只有一个<html>标签,你的已经有一个了。如果您加载它,则需要将其剥离。这意味着您将做不必要的工作,并且 ajax 工作速度会变慢

如果您使用 AJAX,则只需加载您需要的数据。 更少的垃圾 - 更快的响应

更新

试试这个:

<script>



function init(){

// Accodion 1 & 2 -->
$('#st-accordion').accordion();

$('#st-accordion2').accordion();


//Scroll Up -->

$.scrollUp();


// Fade Top Panel -->

var target = $('.fademe');
var targetHeight = target.outerHeight();
$(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});


// Contact Form Send -->

$('#submit').click(function(){
$.post("send.php", $("#mycontactform").serialize(), function(data) { });
$('#success').html('Message sent!');
$('#success').hide(2000);


$('#name1').val('');
$('#telephone').val('');
$('#email').val('');
$('#message').val('');

});


// Viberating Icons -->

var interval = 10;
var duration= 1000;
var shake= 3;
var selector = $('.viberate'); /* Your own container ID*/
$(selector).each(function(){
var elem = this;
var vibrateIndex;
var timeoutIndex;
$(this).hover( /* The button ID */
function(){
vibrateIndex = setInterval(function(){
vibrate(elem);
}, interval, 0);
timeoutIndex = setTimeout(function(){clearInterval(vibrateIndex)},1000);
},
function(){
clearInterval(vibrateIndex);
clearTimeout(timeoutIndex);
}
);
})

var vibrate = function(elem){
$(elem).stop(true,false)
.css({position: 'relative',
left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px',
top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
});
}


$("#posts").masonry({
itemSelector: '.post',
isAnimated: true,
columnWidth: function(containerWidth) {

var width = $(window).width();
var col = 300;


if (width < 1200 && width >= 980) {
col = 240;
} else if (width < 980 && width >= 768) {
col = 186;
}

return col;
}
});

}

</script>

我将所有 JS 放在一个 init() 函数中。现在,在加载 ajax 后,调用该函数。

检查语法,我可能丢失了一些括号

关于javascript - ajax加载脚本不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15810090/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com