Question

我正在使用bootstrap-colorpicker，以便用简单的图形内容填充颜色输入值。为了提供“提示颜色”，我尝试将默认的bootstrap-colorpicker附加其他颜色。看起来像这样：

为了实现这一点，我在页面末尾添加了以下代码。基本上，我们自己进行颜色选择器的加载，然后将所需的div附加到元素上。

$(document).ready(function() {
  setTimeout(function() {
    $(".colorpicker-color").remove();
    $('<div style="display: block;width:130px;height:100px;/* float: right; */position: absolute;top: 104px;/* overflow-y: scroll; */"><div><small class="text-muted">Sugestões:</small><div style="display: flex;flex-wrap: wrap;padding:5px;height: 60px;overflow-y: scroll;"><i class="fas fa-circle" style="top: 0px;margin:5px;color:#aaa;cursor:pointer" id="color_0" onclick=" alert('im working');"></i></div></div> </div>').insertAfter(".colorpicker-hue");
    $(".colorpicker").css("height","185px");
  }, 500);
});

问题是fas fa-circle的click事件无法正常工作。我发出警报（“正在工作”）；仅用于测试建议。点击不会显示。

jquery之后添加元素的结果代码如下：

[![resulting code][3]][3]

Answer 1

所有答案都为您提供了很好的建议，但它们可能错过了问题。实际上，Ludovico给了您答案，但是它悄悄地包含在他的其他非常有用的信息中，因此也许您错过了。

您遇到的是 事件委托 。这意味着，新添加到DOM中的项目没有与之关联的单击绑定（即使您已在代码中定义了它们），因为将click事件绑定到适当的元素时，它们不在DOM中。

（请注意，“ DOM”基本上就是屏幕上显示的 生活 网页-包含所有来自javascript等的时间模块。因此，不仅仅是HTML代码。）

使用jQuery解决这个问题非常简单。

代替：

$('#myID').click(function(){
    //your code here
});

改为执行此操作：

$(document).on('click', '#myID', function(){
    //your code here
});

这是将click事件绑定到呈现DOM时存在的上的东西（即“ document”对象），并且jQuery的.on()方法现在监视DOM，用于插入任何其他内容。如果有任何新元素与指定元素匹配，则单击事件只要出现在DOM中都绑定到该元素。

参考文献：

https://learn.jquery.com/events/event-delegation/

https://api.jquery.com/on/

http://jqfundamentals.com/chapter/events

Answer 2

通常，您应该尝试避免使用onclick之类的内联事件处理程序，尤其是在使用jQuery时，后者本身为事件绑定提供了相当灵活的接口。

您可以改用这种方法：

$(document).ready(function() {
  setTimeout(function() {
    $(".colorpicker-color").remove();

    $(".colorpicker").css("height","185px");


    /* Compose suggestions into a local variable */
    var suggestions = $('<div style="display:block; width:130px; height:100px; position:absolute; top:104px;"><div><small class="text-muted">Sugestões:</small><div style="display: flex;flex-wrap: wrap;padding:5px;height: 60px;overflow-y: scroll;"><i class="fas fa-circle" style="top: 0px;margin:5px;color:#aaa;cursor:pointer" id="color_0"></i></div></div> </div>')

    /* select .fas elements from suggestions and assign click handler that way */
    $('.fa-circle', suggestions).click(function() {

        alert("I'm working");
        return false;
    })

    /* Insert suggestions */
    suggestions.insertAfter(".colorpicker-hue");
  }, 500);
})

Answer 3

用于创建和插入DOM元素的代码格式不正确。其他引号内有未打头的引号：

要解决此问题，您可以对长字符串的内引号进行转义（有关更多详细信息，请参见here），但我建议您在单独的语句中声明事件处理程序（这将使您的代码更容易进行阅读和维护）：

$('body').on("click", ".fa-circle", function() {
    alert("click!");
});

此外，我强烈建议您提取所有内联CSS。这将使您的生活更加轻松。像这样：

<script>
$(document).ready(function() {
  setTimeout(function() {
    $(".colorpicker-color").remove();
    $('<div id="container"><div><small class="text-muted">Sugestões:</small><div id="inner"><i class="fas fa-circle" id="color_0"></i></div></div> </div>').insertAfter(".colorpicker-hue");
    $(".colorpicker").css("height","185px");
  }, 500);

  $('body').on("click", ".fa-circle", function() {
    alert("I'm working!");
  });

});
</script>

<style>
#container{
  display: block;width:130px;height:100px;/* float: right; */position: absolute;top: 104px;/* overflow-y: scroll; */
}
#inner {
  display: flex;flex-wrap: wrap;padding:5px;height: 60px;overflow-y: scroll;
}
#color_0{
  top: 0px;margin:5px;color:#aaa;cursor:pointer
}
</style>

Click事件不适用于动态创建的元素的子元素

3 个答案: