Onclick function 基于元素 id

Question

我正在一个具有 inheritance 关系可视化的网站上工作。

我尝试将每个节点框与特定的 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 function。

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

Answer 1

确保您的代码在DOM Ready中，正如Rocket-hazmat所指出的那样

。点击（）

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

---

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

---

。上（）

使用事件委托/

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

---

尝试

在 Dom Ready 中包装代码

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

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*/});
});

Answer 3

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

Answer 4

你可以试试这个 document.getElementById("RootNode").onclick = function(){/ do something /};