在 JavaScript 单击事件中创建的 Polymer Paper-Button 未触发答案

【问题标题】：Polymer Paper-Button created in JavaScript click event not firing在 JavaScript 单击事件中创建的 Polymer Paper-Button 未触发
【发布时间】：2016-04-05 06:29:04
【问题描述】：

我在我的 JavaScript 代码中创建并分配给我的 HTML 中的一个 div 的聚合物纸按钮有问题。我已经在谷歌上搜索了一段时间，但我空手而归。我只是希望能够在单击它时执行某些操作，但我不知道如何为其单击属性分配一个功能。

提前致谢。

(function(document) {
  'use strict';

  var app = document.querySelector('#app');
  window.addEventListener('WebComponentsReady', function() {

    var mainCollapse = document.getElementById('collapse');

    /*--------------Contact Details Collapseable--------------*/
    var contactDetailsDiv = document.getElementById('contactDetails');
    var gitBtn = document.createElement('paper-button');
    gitBtn.textContent = 'GitHub Profile.';
    gitBtn.raised = true;
    gitBtn.id = 'gitButton';
    gitBtn.link = 'https://github.com/SKHolmes';
    gitBtn.onClick = function(){
      console.log('here');    }

    var githubDiv = document.getElementById('githubDiv');
    githubDiv.appendChild(gitBtn);   

    app.displayContactDetails = function(){
      var contactDetails = contactDetailsDiv.innerHTML;
      mainCollapse.innerHTML = contactDetails;
    }

    //Button Listeners
    document.getElementById("contact-button").addEventListener("click", function(){
      app.displayContactDetails();    
      mainCollapse.toggle();      
    });

    document.getElementById('gitButton').addEventListener('click', function(){
      console.log('here');
    });
  });  
})(document);

好吧，现在有点荒谬了，我几乎尝试了所有方法来让这个按钮在控制台上打印一些东西。包括所有这些。

app.listen(gitBtn, 'tap', 'test');

app.listen(gitBtn, 'click', 'test');

gitBtn.addEventListener('tap', function(){
  alert('here');
});

gitBtn.onclick = 'test';

gitBtn.click = function(){ console.log('here'); }   

app.test = function(){
  console.log('here');
}
gitBtn.setAttribute('on-click', 'app.test');

【问题讨论】：

出于好奇，为什么要在 JS 中添加 paper-button 而不是在 HTML 中声明它？
因为每当我将它添加到我的 HTML 中时，它都会导致包含它的铁折叠出现问题，折叠会打开动画然后不打开具体，这很奇怪。我将错误缩小到我的纸按钮。因此，我将其从 HTML 中取出，并强制将其添加到 div 中。当我这样做时，它会渲染和动画化
您是否尝试过使用gitBtn.onclick = function() ...？
是的，不幸的是没有。为了安全起见，我只是重试了一遍。

标签： javascript html events polymer paper-elements

【解决方案1】：

Polymer docs 描述如何强制添加事件监听器：

使用自动节点查找和便捷方法listen 和 unlisten.
this.listen(this.$.myButton, 'tap', 'onTap');

this.unlisten(this.$.myButton, 'tap', 'onTap');
在将this 设置为元素实例的情况下调用侦听器回调。

如果您强制添加侦听器，则需要将其删除势在必行。这通常在attached 和detached 中完成回调。如果您使用侦听器对象或带注释的事件监听器，Polymer 会自动添加和移除事件监听器。

所以，你可以像这样绑定你的 onClick 函数：

gitBtn.attached = function() {
  this.listen(this, 'tap', 'onClick');
};
gitBtn.detached = function() {
  this.unlisten(this, 'tap', 'onClick');
};

jsbin

(function(document) {
  'use strict';

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

    var gitBtn = document.createElement('paper-button');
    gitBtn.textContent = 'GitHub Profile.';
    gitBtn.raised = true;
    gitBtn.id = 'gitButton';
    gitBtn.link = 'https://github.com/SKHolmes';
    gitBtn.onClick = function() {
      console.log('gitBtn.onClick()');
      log.innerHTML += 'gitBtn.onClick()<br>';
    };

    gitBtn.attached = function() {
      this.listen(this, 'tap', 'onClick');
    };
    gitBtn.detached = function() {
      this.unlisten(this, 'tap', 'onClick');
    };

    var githubDiv = document.getElementById('githubDiv');
    githubDiv.appendChild(gitBtn);

  });

})(document);

<!DOCTYPE html>
<html>

<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-button/paper-button.html">
</head>

<body>
  <div id="githubDiv"></div>
  <div id="log"></div>
</body>

</html>

【讨论】：