$不是AJAX调用后的函数错误

Question

我正在向 WordPress 网页添加无限滚动功能。我正在使用 jQuery 使用以下代码向每三个内容项添加一个类，没有任何问题：

jQuery(document).ready(function($) {
    $(".leden li:nth-child(3n)").addClass('last');
});

在发现上面的代码在 AJAX 调用后没有执行以显示动态内容后，我添加了以下代码：

jQuery(document).ajaxComplete(function($) {
    $(".leden li:nth-child(3n)").addClass('last');  
});

我不确定这是否是在 AJAX 之后使用 jQuery 添加类的正确方法，但似乎 Firebug 在向下滚动页面并动态加载内容后仅显示以下控制台错误：

TypeError: $ is not a function

这让我作为一个 JavaScript/jQuery 新手感到困惑，因为为什么只有在使用相同格式的第二个 jQuery 片段时才会显示错误？据我所知，我只使用了不同的偶数处理程序......

我做错了什么，而且，在使用 AJAX 动态添加内容时，这是执行 jQuery 的正确方法吗？

Answer 1

当你这样做时：

jQuery(document).ajaxComplete(function($) {

你在函数范围内声明了一个变量$，隐藏了外部声明jQuery）。当您不向函数传递任何参数时，此变量的值为 undefined。

做吧

jQuery(document).ajaxComplete(function() {

如果您想将jQuery 别名为$，请将您的整个代码放在这样的函数调用中：

(function($){
   $(document).ajaxComplete(function() {
      $(".leden li:nth-child(3n)").addClass('last');  
   });
   // the rest of your code using $ goes here
})(jQuery);

Answer 2

针对您的问题，“在使用 AJAX 动态添加内容时，这是执行 jQuery 的正确方法吗？”我会说不，因为ajaxComplete 用于指定在任何 ajax 结果返回后会发生什么，所以如果您的页面上有任何其他 ajax 代码，或者如果您将来添加任何插件或任何也使用 ajax 的东西，那么ajaxComplete 代码也会为其他 ajax 调用运行。

典型的 ajax 调用看起来更像这样，在更新内容后在 done() 回调中添加代码。

$.ajax({
    type: "GET",
    url: "some.php",
    dataType: "json"
})
.done(function(data) {
    //example code to set content on the page
    $('#someDiv').html( data.someHtml );

    //your code
    $(".leden li:nth-child(3n)").addClass('last');  
});

---

回答您关于$ 不起作用的问题：

更新

由于您在评论中说 Ajax 调用发生在 document.ready 之前，ajaxComplete 内部的调用 document.ready 将发生得太晚。所以就用这个：

jQuery(document).ajaxComplete(function() {
    jQuery(".leden li:nth-child(3n)").addClass('last');
});

这当然等同于：

jQuery(document).ajaxComplete(function() {
    var $ = jQuery;
    $(".leden li:nth-child(3n)").addClass('last');
});

...但是声明 $ 对于一行代码来说是多余的。

---

您可能在“无冲突”模式下加载了 jQuery。在此模式下，您可以使用一个方便的技巧使 $ 在 document.ready 中可用，这就是您正在使用的 - jQuery(document).ready(function($) { ...。但是你不能用ajaxComplete 做到这一点，此外，如果你把代码放在document.ready 回调中，你已经有$ 可用。我建议您像这样构建您的代码：

jQuery(document).ready(function($) {
    $(document).ajaxComplete(function() {
        $(".leden li:nth-child(3n)").addClass('last');
    });
});

或者，如果您不需要在 document.ready 上运行其他代码，那么您可以像其他答案所建议的那样单独使用 ajaxComplete 函数。

更多详情：http://api.jquery.com/jquery.noconflict/

Answer 3

由于您在 Wordpress 中以 noConflict 模式运行：

jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.

    $(document).ajaxComplete(function() {
        $(".leden li:nth-child(3n)").addClass('last');
    });
});

// Code that uses other library's $ can follow here.
// If there is no other library named $ then you will get a TypeError: $ is not a function

您始终可以使用$ = jQuery; 之类的操作，或使用jQuery 名称代替$。

Answer 4

• 首先检查$ 是否在调用之前实际设置。你用jQuery 而不是 $ 在您的通话中，所以它可能不会被设置。
• 如果已设置 然后删除参数。该函数的内容将有一个 已包含 $ 的 JavaScript 闭包。

Answer 5

$ = jQuery;

所以，既然您使用的是 WordPress，WordPress 会强制 jQuery 使用 jQuery 而不是 $

因此，您的错误出现是因为 $ 未定义。

您可以通过在包含 jQuery 脚本后立即添加 $ = jQuery 来解决此问题，前提是您没有使用任何其他将自身用作 $ 的库（这就是 WP 首先这样做的原因）-否则，您应该将 $ 替换为 jQuery

希望能帮助你理解。