Ajax 需要一键加载

Question

我对 AJAX 和 Jquery 有疑问 经过数小时的研究，我终于在这里发布。

你可以看到我的问题directly on my (nonfinished) website

当你到达页面时，Accueil 上什么都没有（这很正常）

试一试

点击项目 =>

• 触发器标头（正常）

• 发送 Ajax 请求以将项目页面加载到主 div 中（正常）

• ('li') 不会开始向下滑动（除非我在 Project 上再次单击）

试试 2

Go to A Propos =>（一切正常）Go to Project again =>

• 触发一切！

代码

这里是用于触发项目下滑的代码：

$('li').livequery(function(){

    var lis = $('#project-container ul').find('li');
    $(lis).each(function(index) {
        var li = $(this);

        setTimeout(function() {
            li.slideDown(400);
        }, 300 * index);
    }); 
});

我觉得和this question是一样的问题

这一定是一个回调故事，其中 var 没有正确存储或什么的 但不幸的是，我无法让它与我的页面一起使用。

有人可以帮我吗？

Answer 1

确保在页面加载后运行此代码。当我在 90% 的情况下遇到这种问题时，这就是原因。

Answer 2

我不是 livequery 的忠实粉丝（我认为使用默认的 .on() 方法没有任何优势。（delegated ofc）。

对我来说，这似乎是一个过时的库 :)

另一个提示。使用参数调用正确的方法，而不是全局定义东西。如果您像这样定义全局的所有内容，您将看不到什么时候发生了什么变化以及发生了什么变化。

使用三等号=== 和!== 进行比较。而不是==，它将避免意外的误报。

在function GoToLink () { if (WrapLink == 1) { 中，您将表示可以调用js 函数的url 的字符串与1 进行比较。为什么？

你为什么不调用ajax方法来避免更改window.location？

为什么你需要一个额外的 ajax 库，因为你使用 jquery 你可以只使用jquery's default ajax implemention：

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });

只需几个想法就能让你走上正轨

更新：

documentation 中描述了 on 方法的使用，您应该委托使用它，这意味着您将它应用到父容器并给子容器。

$('ul').on('click', 'li', function(){ //做点什么 });

我在没有传递事件的情况下忽略了功能。

$('li').livequery(function () {
    var lis = $('#project-container ul').find('li');
    $(lis).each(function (index) {
        var li = $(this);

        setTimeout(function () {
            li.slideDown(400);
        }, 300 * index);
    });
});

这里最简单的方法是使用方法并在添加列表项时调用它。

 function slideDownListitems($lis){
     $lis.each(function (i) {  
        setTimeout(function () {
            $(this).slideDown(400);
        }, 300 * i);
    });
 }
 //when a listitem is added call
 slideDownListitems( $('#project-container ul li') );

JS 一周干得漂亮！稍后我将更深入地研究其余部分，并为您提供更新（正在工作）grtz