1

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/

Hippp Hipp
  • 45
  • 6

1 Answers1

3

You can do it as below.

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

jsFiddle DEMO

Dipesh Parmar
  • 27,090
  • 8
  • 61
  • 90
  • +1 `$(document).on('click', 'circle[class="c"]', function (e) {` works too – JFK Apr 01 '13 at 06:36
  • Let's say I add another type circle with class 'n'. How would I create a second .on() event for it? I tried the following, but it's not working: $(document).on('click', 'circle[class="n"]', function (e) { – Hippp Hipp Apr 01 '13 at 06:38
  • 1
    @JFK yes it will but i tried to be more specific with parent container. – Dipesh Parmar Apr 01 '13 at 06:38
  • @HipppHipp what you can do is apply some class that start with some string which is same like `str_c` and `str_n` as class now in `.on` click event use code as `$(document).on('click', '#d1 circle[class^="str_"]', function (e) {` – Dipesh Parmar Apr 01 '13 at 06:42
  • I see, thanks. Adding the second .on as $(document).on('click', '#d1 circle[class^="str_"]', function (e) { seems to work in the JS fiddle but not my actual code, so maybe I made a mistake. – Hippp Hipp Apr 01 '13 at 06:43
  • Dipesh, it seems that circle[class=""] only works when the element has one class. If I set the class of the circle to 'c d', for example, then circle[class="c"] won't work. – Hippp Hipp Apr 01 '13 at 06:50
  • http://jsfiddle.net/TyVtW/11/ < you'll see that now when you click on the first circle, it creates a new circle with classes 'n' and 'd'. – Hippp Hipp Apr 01 '13 at 06:52
  • 1
    Found a solution. Change it to [class~="n"], and it'll work for multiple classes. – Hippp Hipp Apr 01 '13 at 07:28
  • @HipppHipp Great...Congrates +1 for u – Dipesh Parmar Apr 01 '13 at 07:37
  • 1) Why don't you use native Raphael's .mousedown event handler which you can attach directly to Raphael.Circle object? 2) And if you use jQuery, in terms of performance it is much better to do $('#d1').on('click', 'circle[class="c"]', ...); than start it from (document). – Roman Apr 01 '13 at 08:16
  • @oyatek second answer is "because its added to the document so we need to delegate events to main parent rather than direct parent.. – Dipesh Parmar Apr 01 '13 at 08:20
  • if you talk about #d1 - it already exists. Contents (circle) are added later. Or not? – Roman Apr 01 '13 at 10:10