如何在Javascript文件中添加事件侦听器并设置类似于Twig的路径

此代码工作正常：

<a href="#" onClick="MyWindow=window.open('{{ path('metadata', {'id': q.id}) }}',
'MyWindow', 'toolbar=yes, location=no, directories=yes, status=yes, 
 menubar=yes, scrollbars=yes, resizable=no, width=600, height=800'); 
 return false;">Quotes Metadata</a>

第一个问题是popupObj是空的，因为Firebug说我不能调用addEventListener来处理空对象

第二个-这是一个.js文件，如何将

“link”

设置为

{{path（'metadata'，{'id'：q.id}}}}

---

我对js一无所知，所以请帮我让它工作起来！提前非常感谢

只需在domready事件（或window.onload）时执行代码，例如

并将您的链接更改为

<a href="{{ path('metadata', {'id': q.id}) }}" id="popup">...</a>

---

这样做，即使用户设备上的javascript不可用，您的链接也能正常工作

非常感谢！它现在可以工作了，但有一个问题-弹出窗口后面的内容正在更改为

{{path（'metadata'，{'id'：q.id}}}}

，我希望它保持原样，并且只在弹出窗口中加载此链接在

窗口之后。打开…

-查看我的更新（或在MDN上搜索

prevent default

）它仍然会更改：（我有一长串这样的链接，只在页面的第一个位置出现弹出窗口。你是说页面中有很多id为“popup”的元素吗？使用类而不是id，然后在domready或window.onload中，循环类“popup”的元素集合，并将处理程序附加到每个

i-th

元素

<a href="#" id="popup">Quotes Metadata</a>

var popupObj = document.getElementById("popup");

popupObj.addEventListener('click', function () {

    window.open( "link", "myWindow", 
    "status = 1, height = 300, width = 300, resizable = 0" )

},false);

window.addEventListener('load', function() {

   var popupObj = document.getElementById("popup");    
   popupObj.addEventListener('click', function () {

         var url = this.getAttribute('href'); // see snippet below
         window.open(url, "myWindow", 
                     "status = 1, height = 300, width = 300, resizable = 0" );

         return false;

   },false);
}); 

<a href="{{ path('metadata', {'id': q.id}) }}" id="popup">...</a>