Onclick function based on element id

I’m working on a site with a visualization of inheritance relation.

I try to link each nodebox with specific URLs. The html of Element looks like this:

<g class="node" id="RootNode" transform="translate(0,453.125)">

I used

$('#RootNode').click(function(){//do something}

and also

document.getElementById("RootNode").onclick(){//do something}

Neither of them can find the element, nor setup the onclick function.

Have I misunderstood anything? Any information will be helpful. Thanks.

Answer

Make sure your code is in DOM Ready as pointed by rocket-hazmat

.click()

$('#RootNode').click(function(){
  //do something
});

---

document.getElementById("RootNode").onclick = function(){//do something}

---

.on()

Use event Delegation/

$(document).on("click", "#RootNode", function(){
   //do something
});

---

Try

Wrap Code in Dom Ready

$(document).ready(function(){
    $('#RootNode').click(function(){
     //do something
    });
});