無法在紙張列表框上觸發選擇鐵事件
[英]Can't fire iron-select event on paper-listbox
問題描述
我正在嘗試根據紙張下拉菜單中的值選擇在鐵選擇事件上觸發一個簡單的偵聽功能。
這是我的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');
}
2 個解決方案
解決方案1
0 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>
解決方案2
0 已采納 2018-08-03 00:52:40
on-EVENTNAME="METHODNAME"是特定於Polymer的語法，用於設置帶注釋的事件偵聽器 ，但是這些注釋僅在Polymer模板內部（在<dom-module>或<dom-bind> ）起作用。
在給出示例代碼並避免使用Polymer語法的情況下 ，您應該使用對元素的引用來手動設置事件偵聽器。 在<paper-dropdown-menu>和內部的<paper-listbox>上都會觸發相同的iron-select事件，因此您只需要偵聽其中之一的iron-select事件。 這是一種解決方案：
為
<paper-dropdown-menu>分配一個ID，以便可以在JavaScript中輕松引用它（使用Document.getElementById()）。<paper-dropdown-menu id="mydropdown">將事件偵聽器（帶有
EventTarget.addEventListener()）添加到<paper-dropdown-menu>引用中：const dropdown = document.getElementById('mydropdown'); dropdown.addEventListener('iron-select', e => listen(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>
通過“ dom-repeat”和數據綁定更新“ paper-listbox”內部的“ paper-item”失敗
[英]Updating 'paper-item's inside 'paper-listbox' by way of 'dom-repeat' and data binding fails
paper-dropdown-menu / paper-listbox：如何在請求中獲取值
[英]paper-dropdown-menu / paper-listbox : how to get the value in the request
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.