CODEWITHSUNDEEP
javascriptjqueryraphael
Hippp Hipp
Hippp Hipp

Reputation: 45

jQuery .on() not working with dynamic Raphael element

In the following JS Fiddle, I've added a Raphael canvas. When you ctrl-click anywhere on the canvas, it creates a circle with class 'c' in the upper left. When the circle is clicked, the .on() event is supposed to trigger an alert('hi'). However, the .on('click', '.c') event is not working. Would someone please explain why the dynamic click event is not being triggered?

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/

Upvotes: 1

Views: 222

Answers (1)

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

You can do it as below.

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

jsFiddle DEMO

Upvotes: 3

Related Questions