基于元素id的onclick函数

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Tushar Gupta - curioustushar 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 发布，翻译遵循 CC BY-SA 3.0 许可协议