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

Question

我在 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');

Answer 1

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

Use automatic node finding and the convenience methods listen and unlisten.
this.listen(this.$.myButton, 'tap', 'onTap');

this.unlisten(this.$.myButton, 'tap', 'onTap');
The listener callbacks are invoked with this set to the element instance.

If you add a listener imperatively, you need to remove it imperatively. This is commonly done in the attached and detached callbacks. If you use the listeners object or annotated event listeners, Polymer automatically adds and removes the event listeners.

因此，您可以像这样绑定 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>

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

Polymer Paper-Button created in JavaScript click event not firing

html

javascript

events

polymer

paper-elements