Question

我正在尝试根据纸张下拉菜单中的值选择对Iron-select事件触发一个简单的侦听功能。

这是我的HTML头

 foreach (var properties in objectProperties.Where(properties => columnNames.Contains(properties.Name) && dataRow[properties.Name] != DBNull.Value))
 {
     properties.SetValue(instanceOfT, dataRow[properties.Name], null);
 }

我的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>

还有我的JS函数

<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>

Answer 1

不太确定这是否是您要实现的目标：

$('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>

Answer 2

on-EVENTNAME="METHODNAME"是Polymer-specific syntax to setup an annotated event listener，但是这些注释仅在Polymer模板内部（在<dom-module>或<dom-bind>内部）起作用。

鉴于示例代码和您的intention to avoid Polymer syntax，您应该使用对元素的引用来手动设置事件侦听器。相同的iron-select事件同时在<paper-dropdown-menu>和内部<paper-listbox>上触发，因此您只需要侦听其中一个的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>

无法在纸张列表框上触发选择铁事件

2 个答案: