在动态HTML链接中添加onclick函数
[英]Adding onclick Functions to Dynamic HTML Links
问题描述
I have a program that dynamically adds links to a table. 
我有一个程序，可以动态向表添加链接。 Each link is unique and is used to display an iframe when selected: 每个链接都是唯一的，并在选定时用于显示iframe：
function buildIframeLink(url){
var link = document.createElement('a');
link.setAttribute('href', '#');
link.setAttribute('onclick', 'displayIframe("' + url + '")');
link.className = 'iframeLink';
link.innerHTML = 'Open';
}
Once the link is built I pass it to a different function: 建立链接后，我将其传递给其他函数：
function displayIframe(url){
//creates iframe based on the URL
An entire anchor tag is created like so: 整个锚标记创建如下：
<a class="iframeLink" href="#" onclick="displayIframe("http://localhost:8080/myapp/abc/xyz");">Open</a>
However when each link is clicked a Reference Error is returned: 但是，当单击每个链接时，会返回参考错误：
ReferenceError: displayIframe is not defined
My function is surely defined; 我的功能肯定已经定义； I've read this is an issue with dynamically created HTML content - is there a pure javascript solution to resolve this? 我读过这是动态创建HTML内容的问题-是否有纯JavaScript解决方案可以解决此问题？
Note * Using link.onclick = displayIframe(url) launches the function immediately which is not suitable for my application 注意*使用link.onclick = displayIframe（url）会立即启动该功能，该功能不适合我的应用程序
3 个解决方案
解决方案1
1 2015-03-15 20:24:47
you can use closure 你可以用闭包
link.onclick = (function( _url )
{
return function()
{
displayIframe( _url );
}
})( url );
解决方案2
1 2015-03-15 20:59:05
This seems to work just fine.... 这似乎工作正常。
If you have any problems with this tell me what issues is and I will try resolve them for you and explain the reason(s) and solution(s) behind it. 如果您对此有任何疑问，请告诉我什么是问题，我将尽力为您解决，并解释其背后的原因和解决方案。
You need to use single quotes to wrap the url into the function call, using double quotes will break the onclick attribute. 您需要使用单引号将网址包装到函数调用中，使用双引号会破坏onclick属性。
Your current onclick attribute will read as 您当前的onclick属性将显示为
onclick="displayIframe("
The double quote used before the url is closing the onclick attribute. 网址前使用的双引号关闭了onclick属性。
Back slashing single quotes (\\''+url+'\\') will give you the correct output: 反斜杠单引号(\\''+url+'\\')将为您提供正确的输出：
onclick="displayIframe('http://localhost:8080/myapp/abc/xyz');"
Working Demo 工作演示
function buildIframeLink(url){ var link = document.createElement('a'); link.setAttribute('href', '#'); link.setAttribute('onclick', 'displayIframe(\\''+url+'\\');'); link.className = 'iframeLink'; link.innerHTML = 'Open'; document.getElementById('Demo_display').appendChild(link); } function displayIframe(url){ alert('Iframe url = '+url); } window.onload=function(){ buildIframeLink('http://localhost:8080/myapp/abc/xyz'); }
<div id="Demo_display"></div>
解决方案3
0 2015-03-15 20:38:45
try this in single quotes not double 试试单引号而不是双
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<script type="text/javascript">
function displayIframe(url){
alert(url);
}
</script>
<body>
<a class="iframeLink" href="#" Onclick="displayIframe('http://localhost:8080/myapp/abc/xyz');">Open</a>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.