jQuery .on() 不适用于动态 Raphael 元素答案

【问题标题】：jQuery .on() not working with dynamic Raphael elementjQuery .on() 不适用于动态 Raphael 元素
【发布时间】：2013-04-01 06:11:10
【问题描述】：

在下面的 JS Fiddle 中，我添加了一个 Raphael 画布。当您按住 ctrl 单击画布上的任意位置时，它会在左上角创建一个带有“c”类的圆圈。单击圆圈时，.on() 事件应该触发警报（'hi'）。但是， .on('click', '.c') 事件不起作用。有人能解释一下为什么没有触发动态点击事件吗？

var r;
$(document).ready(function (){

r = Raphael('d1', 100, 100);   

});
$(document).on('click', '#d1', function (e){ 

e.preventDefault();
e.stopPropagation();
if (e.ctrlKey)
    {  
       var posX = $(this).offset().left, posY = $(this).offset().top;
       var shape = r.circle(20, 20, 20, 20);
       shape.node.setAttribute('class', 'c');
       shape.attr({fill: '#fff', stroke: '#fff', "fill-opacity": 100, "stroke-width": 2});
    }

});
$(document).on('click', '.c', function (e){ 

e.preventDefault();
e.stopPropagation();

alert('hi');

});

http://jsfiddle.net/TyVtW/

【问题讨论】：

标签： javascript jquery raphael

【解决方案1】：

您可以按照以下方式进行。

$(document).on('click', '#d1 circle[class="c"]', function (e){

`jsFiddle DEMO`

【讨论】：

谢谢！这正是我所需要的。
+1 $(document).on('click', 'circle[class="c"]', function (e) { 也可以
假设我添加了另一个类型为“n”的圆。我将如何为它创建第二个 .on() 事件？我尝试了以下方法，但它不起作用： $(document).on('click', 'circle[class="n"]', function (e) {
@JFK 是的，它会，但我试图对父容器更具体。
找到了解决方案。将其更改为 [class~="n"]，它将适用于多个类。