Question

我正在尝试将名为miniColors（http://bit.ly/Mq88mU）的jQuery插件绑定到我拥有的单击函数，以将幻灯片添加到幻灯片管理器。我似乎无法弄清楚如何正确绑定它。有什么想法吗？

这是我的添加幻灯片功能

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

看起来你正在尝试初始化插件，而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();

或者如果你想直接在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 2

您是否尝试将其绑定以使其显示在点击上？我想你只需做一些......

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

您可以使用jQuery选择器为它选择“minicolors”类的div。

我不确定你使用的是find（），但我很确定你不想使用slideTemplate div中的任何HTML作为它前面的选择器。

Answer 3

不确定这是否是完成它的正确方法，但通过使用fadeIn函数，我已经能够完成我的预期。

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

绑定颜色选择器插件以单击功能

3 个答案: