In Optimizely, basic jQuery click event not working

Question

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();

You're setting up an immediately-invoked function to which you pass `window.jQuery`, and then the first thing you do is *reassign* that parameter to `window.$`. That seems odd. And then you don't use the parameter anyway ... — Pointy, Oct 01 '12 at 14:06
Sorry @Pointy, that was some expeirement I was doing. Let me update the code now. — Shaoz, Oct 01 '12 at 14:08
OK so now the code is just syntactically incorrect :-) According to their FAQ, the Optimizely code includes its own isolated copy of jQuery, so it will have no effect on other code on your pages. — Pointy, Oct 01 '12 at 14:10
Where are you running that code? Is it inside a jQuery "ready" handler or is it just straight JavaScript in a ` — Pointy, Oct 01 '12 at 14:13
I'm doing it inside a code-editing window in Optimizely itself. When I spoke to the Optimizely guy, he told me to use window.$ for jquery. But I don't know how to do that when creating a plugin inside with closure... — Shaoz, Oct 01 '12 at 14:14
@Pointy: it works now, thanks a lot... As you pointed out, the problem was that I forgot to wrap my code inside the jquery "ready" handler: `$(function() {...});` — Shaoz, Oct 01 '12 at 15:47

score 1 · Accepted Answer · answered Nov 08 '12 at 23:35

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.

In Optimizely, basic jQuery click event not working

1 Answers1