7

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.

Felix Wang
  • 73
  • 1
  • 2
  • 5

4 Answers4

25

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
    });
});
Community
  • 1
  • 1
Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
  • Sorry about that it was a typo. With .click it's still not working. – Felix Wang Feb 17 '14 at 17:04
  • 1
    @FelixWang: Is your code inside a `$(function(){})` (or `$(document).ready(function(){})`)? – gen_Eric Feb 17 '14 at 17:06
  • @RocketHazmat added your helpful comment to answer . – Tushar Gupta - curioustushar Feb 17 '14 at 17:13
  • @RocketHazmat I used $(document).on("click", "#RootNode", function(){ //do something }); and it works for my case. Why the .click does not work? – Felix Wang Feb 17 '14 at 17:17
  • @FelixWang: Because you are trying to bind it *before* it exists in the DOM. You need to wait until the DOM is ready. `$(document).on("click", "#RootNode"` actually binds the event to the `document` and just checks to see if it matches the selector (it's called "event delegation" and is used to bind events to elements that will be added to your page in the future). – gen_Eric Feb 17 '14 at 17:20
  • @FelixWang you must have added `#RootNode` element after DOM is ready. Read ---> https://learn.jquery.com/events/event-delegation/ As your elemet `#RootNode` was not present at DOM ready so click handler was not attached to it .So we used `.on()` to register handler to `document` – Tushar Gupta - curioustushar Feb 17 '14 at 17:20
8

you can try these:

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

or

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

or

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

There is a point for the first two method which is, it matters where in your page DOM, you should put them, the whole DOM should be loaded, to be able to find the, which is usually it gets solved if you wrap them in a window.onload or DOMReady event, like:

//in Vanilla JavaScript
window.addEventListener("load", function(){
     document.getElementById("RootNode").onclick = function(){/*do something*/};
});
//for jQuery
$(document).ready(function(){
    $('#RootNode').click(function(){/*do something*/});
});
Mehran Hatami
  • 12,723
  • 6
  • 28
  • 35
0

$(document).ready(function() {
   $("#click").click(function(){
    console.log("button clicked");
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click">Click Me</button>
CHANDAN KUMAR
  • 11
  • 1
  • 2
0

You can try this one:

document.getElementById("RootNode").onclick = function() {
  /* do something */
};
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
AKHLAK PATEL
  • 1
  • 1
  • Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Jul 31 '22 at 09:01