Jquery 插件无法正常工作

Question

我正在使用 TinyColor Jquery 插件。

当您单击顶部的十六进制代码或在输入中输入颜色时，它会更改圆圈中的颜色。

我希望能够单击带圆圈的 Hex 并根据该 Hex 加载它，但它不起作用...任何方法都会有帮助！

    function colorChange(o) {
    function n(o) {
        return $.map(o, function(o) {
            return '<span style="background:' + o.toHexString() + ';" class="hextext"><a href="#"  >' + o.toHexString() + "</a></span>"
        }).join("")
    }
    var t = tinycolor(o),
        r = ["hex:  " + t.toHexString()].join("\n");
    $("#code-output").text(r).css("border-color", t.toHexString());
    var i = $("#filter-output").toggleClass("invisible", !t.isValid()),
        e = t.monochromatic();
    i.find("#mono").html(n(e));
    var a = t.analogous();
    i.find("#analogous").html(n(a))
}
$(function() {
    $(".color").bind("keyup change", function() {
        colorChange($(this).val())
    }), $("a").click(function() {
        return $(".color").val($(this).text()).trigger("change"), !1
    }), colorChange({
        r: 25,
        g: 50,
        b: 100
    })
});

http://codepen.io/andrewp/pen/KwZbPW

Answer 1

除了您已经为 anchor 定义的事件之外，您还需要解决锚标记的新事件，因为所谓的圈子中的元素是动态生成的。所以，

 //For AnchorUse these two event handler and it will work as required,
 $(document).on("click","a",function() {        
        $(".color").val($(this).text()).trigger('change');
        return false;
  });
  
 //For Color patches 
 $(document).on("click",".hextext",function() {  
        $(".color").val($(this).children("a").text()).trigger('change');
        return false;
    });

注：

您为锚点指定的click事件对动态创建的锚点不起作用。要解决这个问题，您需要 Understand & Use Event Delegation.

Jquery 插件无法正常工作

Jquery Plugin not working how I want it to

jquery

jquery-plugins

见Updated Pen