在WordPress中将jQuery脚本与Ajax一起使用 [英] Using jQuery script with Ajax in Wordpress

问题描述

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

I am using the Ajaxify WordPress Site (AWS) plugin for my wordpress site. I am also using a jQuery script for the menu. This basically animates the menu.

( 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时才使菜单起作用(换句话说，必须首先输入文章才能使菜单起作用).所以看来我没办法了.

When the AWS plugin is active the menu script does not work. The menu works fine when the site is loaded, but if you enter an article (with the ajaxify plugin enabled) the menu script stops working. I am not sure why. I have tried using $(document).ajaxComplete(function(){ instead of: $( document ).ready(function() { but this causes the menu to work only if the ajax is loaded first (in other words you have to enter an article first for the menu to work). So it seems I am out of options.

如何在触发Ajax之前和之后使脚本工作? 另外，一旦加载了ajax，是否有办法重新触发jQuery脚本?

How can I get the script to work both before and after the ajax is triggered? Alternatively, is there a way to re-trigger a jQuery script once ajax is loaded?

此处的测试示例: http://testsite.seyoum.net/ 由于这是一个测试站点，因此菜单中的某些链接不起作用.确实可以使用标记"和未发布".

推荐答案

代替

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

尝试

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

如果您要使用AJAX加载内容，并且需要通过单击此新元素来执行某种脚本，则需要在整个document对象中监视click事件.另外，您也可以查看容器中是否存在单击事件的内容，理论上它应该可以正常工作.

If you have a content that is loading with AJAX, and if you need to preform some kind of script with the click on this new element, you'll need to watch the entire document object for a click event. Alternatively you can watch for the container in which the content is loaded for a click events, it should work in theory iirc...

这篇关于在WordPress中将jQuery脚本与Ajax一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！