Question

早些时候问过但注意到了什么。有一个主页面使用以下代码将外部PHP加载到DIV：

$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
$('#content').load('pages/index.php');



// Handle Clicks
$('ul.nav li a').click(function() {
    var page = $(this).attr('href');

    $('#content').hide().load('pages/' + page + '.php').fadeIn('normal');



    //Wont Redirect
    return false;

});
// /

   });

页面加载到DIV中，但JavaScripts正在播放。顶部不起作用，底部起作用。两者都使用

 $(function() {
 <script>

    $(function() {

        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>
    $(function () {
        $.scrollUp();
    });
    </script>

Answer 1

查看两个pastie文件，您似乎在后面加载的HTML中包含带有fademe类的HTML元素，而不是最初在页面上的HTML中。因此，您的第一个函数将无法工作，因为jQuery将找不到具有fademe类的任何元素。

要使您的功能正常工作，需要将其包含在加载callback。

中

$('#content').load('pages/index.php', function() {

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

Answer 2

您似乎将事件处理程序附加到不存在的（尚未）DOM元素，因为您是ajax内容，因此默认情况下ajax是异步的，并且您的DOM尚未收到服务器响应..

您可以使用委托附加事件处理程序，例如：

$('body').on('click', 'ul.nav li a', function() {
    var page = this.href;

    $('#content').hide().load('pages/' + page + '.php').fadeIn('normal');

    //Wont Redirect
    return false;
});

或在ajax的成功回调函数上附加事件处理程序。

希望它有所帮助。

ajax将内容加载到div脚本中不起作用（一个是不是）

2 个答案: