Rich-text Reply

Adding click behaviors to new elements in a variation

guitarcat 06-17-14
Accepted Solution

Adding click behaviors to new elements in a variation

[ Edited ]

using the edit code tab, I can change css and like that but behaviors, not so much.

 

The first thing I need to do is add some  click behaviors to page elements that dont have them in the original page but I am unsuccessful. I saw in your developer section how to refer to an external script and that might work for me but I don’t have access to our company server in that way and I believe that cross domain scripts are blocked for security. 

Amanda 06-17-14
 

Re: Adding jQuery to experiment variations

[ Edited ]

You can add any custom jQuery or JavaScript to the variation code that triggers the behavioral action right in your variation code. What sort of behavior are you trying to add?

 

Here's an example of how you might trigger an action on click of a specific button. 

 

$("html").delegate( ".class", "mousedown", function() { 
// the behavior you want to trigger
});
Optimizely
guitarcat 06-18-14
 

Re: Adding jQuery to experiment variations

OK sounds good. Thank you for your suggestion.

 

I select the item I want to apply the click behavior to:

 

$(".compare-InnerContentPane > div:eq(4) > div:eq(4) > div:eq(0)")

 

For experimenting just an alert on click.

 

$(".compare-InnerContentPane > div:eq(4) > div:eq(4) > div:eq(0)").on("click", function(){

alert('clicked');

});

 

gives 

Error evaluating variation:

Error TypeError: undefined is not a function(line1, col68)

 

 

and

 

$(".compare-InnerContentPane > div:eq(4) > div:eq(4) > div:eq(0)").delegate( ".compare-InnerContentPane", "mousedown", function() {
// the behavior you want to trigger
alert('optimizely');
});

 

no error but it doesn't work. I am not familiar with 'delegate' but I followed the pattern you indicated I think. 

 

 

siherron 06-18-14
 

Re: Adding jQuery to experiment variations

Hey there, instead of using 

 

.on("click", function(){...});

 

use

 

.bind("click", function(){...});

 

so in your example you have written:

 

$(".compare-InnerContentPane > div:eq(4) > div:eq(4) > div:eq(0)").on("click", function () {
alert('clicked');
});

 

instead try this version:

 

$(".compare-InnerContentPane > div:eq(4) > div:eq(4) > div:eq(0)").bind("click", function () {
alert('clicked');
});

 

Without the page to look at the code I am just guessing, but I've seen occasions where Optimizely throws an error because the version of the Optimizely snippet being used has a much reduced collection of jQuery methods.

 

Try it and post a response if it works.

 

If you aren't used to using and troubleshooting JS or jQuery do a search for information around using Developer Tools, specifically the "console" - this is an area in Google Chrome and Firefox where you can test a piece of code and troubleshoot its effects or errors. Super handy. Codeschool.com has a free elective tutorial/class around Dev Tools in chrome, it may help.

 

Cheers.

Simon Herron
Optimisation Consultant
Level 2
guitarcat 06-18-14
 

Re: Adding jQuery to experiment variations

thanks Sharon, no joy.

$(".compare-InnerContentPane > div:eq(4) > div:eq(4) > div:eq(0)").bind("click", function () {
alert('clicked');
});

didn't throw an error but no alert either. I am trying to see the result though in the interactive mode screen . Click behavior should show up there, right? Doing a simple .css change on that element does show up so I'm targeting it correctly.

Thanks for the heads up about developer tools
siherron 06-18-14
 

Re: Adding jQuery to experiment variations

[ Edited ]

Try previewing the variant rather than using the Interactive view - the definitely script works in 'preview' on the sites I've tried.

 

CSS and HTML can be viewed there quickly, but scripts without an interval might now trigger straight away.

 

Capture.PNG

 

 

Simon Herron
Optimisation Consultant
Level 2
guitarcat 06-18-14
 

Re: Adding jQuery to experiment variations

thanks!! variant/preview did the trick. I wouldn't be surprised if every one of the solutions offered works. Thanks all.
Amanda 06-18-14
 

Re: Adding jQuery to experiment variations

[ Edited ]

Great!

 

 

Also, just for refernece -- @siherron is on the right track about the error you were seeing. The error was occurring because Optimizely uses jQuery version 1.6.4 and .on() exists in 1.7. 

 

Also, the first selector in .delegate(), or the element to which the event is bound, should be an acestor. You can safely use $('html') like in my example. There is a really great post here about the differences, pros, and cons of .on() vs .bind() vs .live() vs .delegate()

 

 

Optimizely