javascriptjqueryjquery-eventsoptimizely

In Optimizely, basic jQuery click event not working


In Optimizely, I'm trying to do some basic click events. I know that Optimizely is only on jQuery 1.6, so using on(), off() for events is useless. To make sure, I'm using the most basic event handler click(function(){ ... }));, but even this is not working. I was told to use window.$ but in the click() this technique doesn't work either. Is the jQuery in Optimizely different?

I know there is some kind of issue between Optimizely and jQuery but please can someone shed me some light on this?

JS snippett:

(function(window.$) {
  
  window.$.fn.tabbs = function(options) {
    var settings = {
            dir: 'top',
            trigger: 'a',
            target: '.tab-section',
            selected: 'selected'
        },
        html = $('html');
        
    window.alert('jquery object: ' + window.$);

    if (html.hasClass('no-js')) {
        html.removeClass('no-js').addClass('js');
    } else {
        html.addClass('js');
    }
    
    var classAction = function(obj, action, cls) {
        window.$(obj)[action](cls);
    };
    
    window.$.extend(settings, options);
    
    return this.each(function() {
        var tabs = window.$(this),
            tab = tabs.find(settings.trigger),
            tabSection = window.$(settings.target),
            tabsSystemContainer = tabs.closest('div');
        
        switch(settings.dir) {
            case 'left':
                tabsSystemContainer.removeClass(settings.dir || 'top').addClass('left' || settings.dir);
                break;
            default:
                tabsSystemContainer.removeClass('left' || settings.dir).addClass(settings.dir || 'top');
        }
        //this where I'm having problems
        tab.click(function(e) {
            var self = window.$(this);
            
            e.preventDefault();
            
            window.alert('Hello, inside tab click event...');
        });
    });
  };
}(window.jQuery));

window.$('.tabs').tabbs();

Solution

  • You have a syntax error on line 1:

    (function(window.$) {
    

    should read

    (function($) {
    

    You can use whichever jQuery (>= 1.6) you like: just embed the one you want, and in Optimizely's Settings -> jQuery Settings, select "Do not include jQuery in project code", and things will work just fine. Be sure you include your own jQuery before the Optimizely script tag, though.