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

在回答你的问题时，＆＃34;这是使用AJAX动态添加内容时执行jQuery的正确方法吗？＆＃34;我会说不，因为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;没有冲突＆＃34;模式。在此模式下，您可以使用$从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上运行其他代码，那么您可以像其他答案所建议的那样单独使用{{1}}功能。

此处有更多详情：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的库，那么您可以在添加$之后立即添加$（这就是为什么WP会这样做）首先） - 否则，您应该将jQuery替换为{{1}}

希望能帮助您理解。

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

5 个答案: