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

【问题标题】：Using jQuery script with Ajax in Wordpress在 Wordpress 中使用带有 Ajax 的 jQuery 脚本
【发布时间】：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 无关

标签： javascript jquery ajax wordpress jquery-plugins

【解决方案1】：

代替

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

试试

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

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

【讨论】：