Question

我有一个动态添加表链接的程序。每个链接都是唯一的，用于在选中时显示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）立即启动不适合我的应用程序的函数

Answer 1

你可以使用闭包

link.onclick = (function( _url )
{
    return function()
    {
        displayIframe( _url );
    }
})( url );

Answer 2

这似乎工作得很好......

如果您有任何问题，请告诉我哪些问题，我会尝试为您解决这些问题并解释其背后的原因和解决方案。

您需要使用单引号将url包装到函数调用中，使用双引号将破坏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>

Answer 3

在单引号中尝试此操作而不是双倍

<!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函数添加到动态HTML链接

3 个答案: