在动态HTML链接中添加onclick函数
[英]Adding onclick Functions to Dynamic HTML Links
问题描述
我有一个程序，可以动态向表添加链接。 每个链接都是唯一的，并在选定时用于显示iframe：
function buildIframeLink(url){
var link = document.createElement('a');
link.setAttribute('href', '#');
link.setAttribute('onclick', 'displayIframe("' + url + '")');
link.className = 'iframeLink';
link.innerHTML = 'Open';
}
建立链接后，我将其传递给其他函数：
function displayIframe(url){
//creates iframe based on the URL
整个锚标记创建如下：
<a class="iframeLink" href="#" onclick="displayIframe("http://localhost:8080/myapp/abc/xyz");">Open</a>
但是，当单击每个链接时，会返回参考错误：
ReferenceError: displayIframe is not defined
我的功能肯定已经定义； 我读过这是动态创建HTML内容的问题-是否有纯JavaScript解决方案可以解决此问题？
注意*使用link.onclick = displayIframe（url）会立即启动该功能，该功能不适合我的应用程序
3 个解决方案
解决方案1
1 2015-03-15 20:24:47
你可以用闭包
link.onclick = (function( _url )
{
return function()
{
displayIframe( _url );
}
})( url );
解决方案2
1 2015-03-15 20:59:05
这似乎工作正常。
如果您对此有任何疑问，请告诉我什么是问题，我将尽力为您解决，并解释其背后的原因和解决方案。
您需要使用单引号将网址包装到函数调用中，使用双引号会破坏onclick属性。
您当前的onclick属性将显示为
onclick="displayIframe("
网址前使用的双引号关闭了onclick属性。
反斜杠单引号(\\''+url+'\\')将为您提供正确的输出：
onclick="displayIframe('http://localhost:8080/myapp/abc/xyz');"
工作演示
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
试试单引号而不是双
<!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>
动态元素onclick函数
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.