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中

.click()

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

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

<小时/> .on()

使用event Delegation/

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

Onclick函数基于元素id

2 个答案: