将点击函数添加到动态 HTML 链接

Adding onclick Functions to Dynamic HTML Links

本文关键字：动态 HTML 链接 添加 函数      更新时间：2023-09-26

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

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

如果您对此有任何问题，请告诉我问题是什么，我将尝试为您解决它们并解释其背后的原因和解决方案。

您需要使用单引号

将 url 包装到函数调用中，使用双引号会破坏 onclick 属性。

您当前的点击属性将显示为

onclick="displayIframe("

URL 之前使用的双引号用于关闭 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>

你可以使用闭包

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

尝试用单引号而不是双引号 

<!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>
相关文章：