文章/答案/技术大牛

发布

社区首页 >问答首页 >无法在纸制列表框上启动铁选择事件

问无法在纸制列表框上启动铁选择事件
EN

Stack Overflow用户

提问于 2018-08-01 13:34:16

回答 2查看 520关注 0票数 1

我试图启动一个简单的听功能的铁选择事件的基础上选择一个值在一个纸下拉菜单。

这是我HTML的头

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My App</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" type="text/scss" href="./main.scss" />
<script src="./js/app.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/neon-animation.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/web-animations.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-dropdown-menu/paper-dropdown-menu.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-item/paper-item.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-listbox/paper-listbox.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-input/paper-input.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icon/iron-icon.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icons/iron-icons.html"/>
</head>

我HTML的身体

<div class="assign-country">
  <paper-dropdown-menu on-iron-select="listen" label="Country">
    <paper-listbox on-iron-select="listen" slot="dropdown-content" class="dropdown-content" selected="1">
      <paper-item>France</paper-item>
      <paper-item>Germany</paper-item>
      <paper-item>Spain</paper-item>
      <paper-item>England</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>
</div>

和我的JS功能

function listen () {
  console.log('coucou');
}

javascript

html

polymer

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-03 00:52:40

on-EVENTNAME="METHODNAME"是特定于聚合物的语法来设置带注释的事件侦听器，但是这些注释只在聚合物模板( 或中)中工作。

给定示例代码和避免聚合物语法的意图，您应该手动设置事件侦听器，并引用元素。相同的iron-select事件在<paper-dropdown-menu>和内部<paper-listbox>上都会触发，因此您只需要在其中一个事件上侦听iron-select事件。这里有一个解决方案：

为<paper-dropdown-menu>分配一个ID，以便在JavaScript中很容易地引用它(使用Document.getElementById())。
将事件侦听器(带有EventTarget.addEventListener())添加到<paper-dropdown-menu>引用： const下拉= document.getElementById('mydropdown')；dropdown.addEventListener(‘iron’，e =>侦听(E))；

const dropdown = document.getElementById('mydropdown');
dropdown.addEventListener('iron-select', e => listen(e));

function listen(e) {
  console.log('iron-select', e);
  document.getElementById('output').innerText = e.detail.item.innerText;
}

<head>
  <base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
  <script src="webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="paper-listbox/paper-listbox.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="neon-animation/web-animations.html">
</head>
<body>
  <paper-dropdown-menu id="mydropdown" label="Country">
    <paper-listbox slot="dropdown-content" class="dropdown-content" selected="1">
      <paper-item>France</paper-item>
      <paper-item>Germany</paper-item>
      <paper-item>Spain</paper-item>
      <paper-item>England</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>
  <pre id="output"></pre>
</body>

票数 0

Stack Overflow用户

发布于 2018-08-01 13:57:29

不太确定这是否是你想要达到的目标：

$('paper-item').click(function(){
   console.log($(this).text());
   	})

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My App</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" type="text/scss" href="./main.scss" />

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>	
	
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/neon-animation.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/web-animations.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-dropdown-menu/paper-dropdown-menu.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-item/paper-item.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-listbox/paper-listbox.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-input/paper-input.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icon/iron-icon.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icons/iron-icons.html"/>
</head>

<div class="assign-country">
  <paper-dropdown-menu on-iron-select="listen" label="Country">
    <paper-listbox on-iron-select="listen" slot="dropdown-content" class="dropdown-content" selected="1">
      <paper-item name="france">France</paper-item>
      <paper-item>Germany</paper-item>
      <paper-item>Spain</paper-item>
      <paper-item>England</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51634716

复制

相似问题

问无法在纸制列表框上启动铁选择事件
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在纸制列表框上启动铁选择事件EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在纸制列表框上启动铁选择事件
EN