在 Wordpress 中使用带有 Ajax 的 jQuery 脚本

Posted 2023-05-09

【中文标题】在 Wordpress 中使用带有 Ajax 的 jQuery 脚本

【英文标题】：Using jQuery script with Ajax in Wordpress

【发布时间】：2016-09-22 05:29:17

【问题描述】：

我正在为我的 wordpress 网站使用Ajaxify WordPress Site (AWS) 插件。 我还在为菜单使用 jQuery 脚本。这基本上使菜单动画化。

( function( $ ) 
$( document ).ready(function() 
$('#cssmenu li.has-sub>a').on('click', function()
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('open')) 
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp();
        
        else 
            element.addClass('open');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp();
        
    );

    $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

    (function getColor() 
        var r, g, b;
        var textColor = $('#cssmenu').css('color');
        textColor = textColor.slice(4);
        r = textColor.slice(0, textColor.indexOf(','));
        textColor = textColor.slice(textColor.indexOf(' ') + 1);
        g = textColor.slice(0, textColor.indexOf(','));
        textColor = textColor.slice(textColor.indexOf(' ') + 1);
        b = textColor.slice(0, textColor.indexOf(')'));
        var l = rgbToHsl(r, g, b);
        if (l > 0.7) 
            $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
            $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
        
        else
        
            $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
            $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
        
    )();

    function rgbToHsl(r, g, b) 
        r /= 255, g /= 255, b /= 255;
        var max = Math.max(r, g, b), min = Math.min(r, g, b);
        var h, s, l = (max + min) / 2;

        if(max == min)
            h = s = 0;
        
        else 
            var d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch(max)
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            
            h /= 6;
        
        return l;
    
);
 )( jQuery );

当 AWS 插件处于活动状态时，菜单脚本不起作用。加载站点时菜单工作正常，但如果您输入一篇文章（启用 ajaxify 插件），菜单脚本将停止工作。我不确定为什么。我试过使用 $(document).ajaxComplete(function() 而不是：$( document ).ready(function() 但这会导致菜单仅在首先加载 ajax 时才起作用（换句话说，您必须先输入文章才能使菜单起作用）。所以看来我别无选择。

如何让脚本在触发 ajax 之前和之后工作？ 或者，有没有办法在加载 ajax 后重新触发 jQuery 脚本？

此处的测试示例：http://testsite.seyoum.net/ 由于这是一个测试站点，菜单中的某些链接不起作用。 “标记”和“未发布”确实有效..

【问题讨论】：

你在控制台日志中得到了什么？

与 jQuery 或 Ajax 无关

【参考方案1】：

代替

$('#cssmenu li.has-sub>a').on('click', function()...);

试试

$(document).on('click', '#cssmenu li.has-sub>a', function()...);

如果您有使用 AJAX 加载的内容，并且如果您需要通过单击此新元素来执行某种脚本，则您需要查看整个 document 对象的单击事件。或者，您可以查看为单击事件加载内容的容器，理论上它应该可以工作 iirc...