在JavaScript点击事件中创建的聚合物纸按钮未启动

Polymer Paper-Button created in JavaScript click event not firing

本文关键字：聚合物 按钮 启动 创建 JavaScript 事件      更新时间：2024-01-20

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

Polymer文档描述了如何强制添加事件侦听器：

使用自动节点查找和方便的方法listen和CCD_ 2。

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>

相关文章：