基于元素ID的点击功能

Question

我正在制作一个展示继承关系的网站。

我试图将每个节点框与特定的URL链接起来。Element的HTML代码如下：

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

我使用了

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

而且

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

他们两个都无法找到该元素，也无法设置onclick函数。

我有误解吗？任何信息都将有所帮助。谢谢。

- Felix Wang

---

这两种语法都不正确。 - gen_Eric

当处理程序绑定时，#RootNode元素是否已经存在？ - fast

Answer 1

请确保你的代码在DOM Ready中，如rocket-hazmat所指示。

.click()

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

---

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

---

.on()

使用事件委托/

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

---

尝试

将代码包装在Dom准备好中

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

- Tushar Gupta - curioustushar

---

抱歉，那是个打错字。用 .click 还是不起作用。 - Felix Wang

@FelixWang：你的代码是否在 $(function(){})（或 $(document).ready(function(){})）中？ - gen_Eric

@RocketHazmat将您的有用评论添加到答案中。 - Tushar Gupta - curioustushar

@RocketHazmat 我使用了 $(document).on("click", "#RootNode", function(){ //做一些事情 }); 并且它对我的情况起作用。为什么 .click 不起作用呢？ - Felix Wang

@FelixWang：因为你试图在DOM中元素存在之前绑定它。你需要等待DOM准备就绪。$(document).on("click", "#RootNode"实际上将事件绑定到了document，并且只是检查是否匹配选择器（这被称为“事件委托”，用于将事件绑定到将来添加到页面中的元素）。 - gen_Eric

Answer 2

您可以尝试以下方法：

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

或者

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

或者

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

前两种方法需要注意的一点是，它们应该放在页面DOM中的哪个位置，整个DOM都需要被加载才能找到它们。通常如果你把它们包裹在window.onload或DOMReady事件中，这个问题就可以解决：

//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

---

给我一些时间，我不能这么快接受。再次感谢。 - Felix Wang

Answer 3

你可以试试这个：

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

- AKHLAK PATEL

---

你的回答可以通过添加更多关于代码的信息以及它如何帮助提问者来改进。 - Tyler2P

Answer 4

$(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