Onclick函数基于元素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功能.

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

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 应该被加载，以便能够找到，如果你把它们包装起来，这通常会得到解决awindow.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*/});
});