Bind color picker plugin to click function

Question

I'm trying to bind a jQuery plugin called miniColors ( http://bit.ly/Mq88mU ) to a click function I have, to add slides to a slide manager. I can't seem to figure out how to bind it right. Any ideas?

This is my add slide function

el.on('click', '.addSlide', function (e) {
    e.preventDefault();
    var templ = $('#slideTemplate').html();
    var id = parseInt( $('ul.ui-sortable li').last().find('.order').val() ) || 0;
    var slide = templ.replace(/%id%/g, id).replace(/%id1%/g, id + 1);
    $(templ).find('.minicolors').minicolors();
    $(slide).hide().insertAfter($('ul.ui-sortable li').last()).fadeIn(300);
});

Answer 1

Not sure if this is the correct way to accomplish it, but by using the fadeIn function I have been able to accomplish what I intended.

$(slide).hide().insertAfter($('ul.ui-sortable li').last()).fadeIn(function(){
    $(this).find('.minicolors').minicolors();
});

Answer 2

It looks like you're trying to initialize the plugin while it doesn't exist on the DOM.

var templ = $('#slideTemplate').html();
var id = parseInt( $('ul.ui-sortable li').last().find('.order').val() ) || 0;
var slide = templ.replace(/%id%/g, id).replace(/%id1%/g, id + 1);

$('PARENT').append($(templ));
$(templ).find('.minicolors').minicolors();

Or if you want to work directly off the DOM:

var templ = $('#slideTemplate');
var id = parseInt( $('ul.ui-sortable li').last().find('.order').val() ) || 0;
var slide = templ.html().replace(/%id%/g, id).replace(/%id1%/g, id + 1);
templ.find('.minicolors').minicolors();

Answer 3

Are you trying to bind it so that it appears on the click? I'd imagine you just need to do something like...

$('.minicolors').minicolors();

You can select the divs of class 'minicolors' by using the jQuery selector for it.

I'm not sure what you're using find() for, but I'm pretty sure you don't want to use whatever HTML is in the slideTemplate div as the selector ahead of it.