Jquery插件无法正常工作

Question

我正在使用TinyColor Jquery插件。

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

我希望能够点击带有圆圈的十六进制并根据十六进制加载它但是它不起作用......任何事情都会有所帮助！

    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。

请参阅Updated Pen