The Code Buccaneer The Code Buccaneer - 5 months ago 10x
Javascript Question

Selector in jquery on function

For multiple raphael (svg) nodes I have defined a css class. All these nodes can be selected by referring to this class, e.g.:


gives an overview of all the nodes. For your information the nodes are dynamically created

Now I want to define a (jquery) on event handler using the following code:

$(document).on("mousedown", SELECTOR, (function(evt) {

In which this should give the actual node on which is clicked. For the SELECTOR I have used the following options:

  1. $(':raph(nodecss)')

  2. "$(':raph(nodecss)')"

  3. ':raph(nodecss)'

All are not working, because of different reasons:

  1. Console.log(this) refers to the window instead of the clicked node

  2. Uncaught Error: Syntax error, unrecognized expression: $(':raph(nodecss)')

  3. The click event doesn't trigger at all (no response) for dynamically created nodes, for the nodes created at the load of the page this works

What should be used as the selector in the on-function so that the event is triggered on clicking a node and this gives the actual node that has been clicked on?


More formally, this should work:

$(document).on("mousedown", ':raph(nodecss)',
    function(evt) {