聚合物纸图标按钮不会触发点击答案

【问题标题】：Polymer paper-icon-button won't fire click聚合物纸图标按钮不会触发点击
【发布时间】：2015-10-11 17:28:39
【问题描述】：

我已经安装了 Polymer 1.0 用于我的网站。我在 paper-toolbar 元素中有一个 paper-icon-button 元素。但是，paper-icon-button 不会触发任何事件。这是我的html。

<!DOCTYPE html>
  <html>
    <head>
      <!-- Declare meta -->
      <meta charset="UTF-8">
      <meta name="author" content="TickerOfTime">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> <!-- Load jQuery 2.1.4 -->
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> <!-- Load jQueryUI 1.11.4 -->
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css"> <!-- Load jQueryUI CSS 1.11.4 -->
      <link href="http://fonts.googleapis.com/css?family=Roboto:400,600|Ubuntu|Poiret+One|Source+Code+Pro:300" rel="stylesheet" type="text/css"> <!-- Load Fonts (Roboto:400(600), Ubuntu:400, Poiret One:400, Source Code Pro:300l) -->
      <link rel="stylesheet" href="resources/prettify.css"> <!-- Load Prettifier CSS -->
      <script type="text/javascript" src="resources/prettify.js"></script> <!-- Load Prettifier JS -->
      <script src="script.js" type="text/javascript"></script> <!-- Load JavaScript -->
      <link href="stylesheet.css" rel="stylesheet" type="text/css"> <!-- Load CSS -->
      <link rel="icon" href="images/rcpanel.png"> <!-- Load favicon -->
      <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js" type="text/javascript"></script> <!-- Load polyfill support -->
    <!--                          Load Polymer/Iron here                                -->
      <link rel="import" href="bower_components/iron-icon/iron-icon.html"> <!-- Load Polymer Iron-Icon -->
      <link rel="import" href="bower_components/iron-icons/iron-icons.html"> <!-- Load Polymer Iron-Icons -->
    <!--                          Load Polymer Gold here                                -->
      <link rek="import" href="bower_components/gold-email-input/gold-email-input.html"> <!-- Load Polymer Gold-Email-Input -->
    <!--                          Load Polymer Molecules here                           -->
      <link rel="import" href="bower_components/marked-element/marked-element.html"> <!-- Load Polymer Marked -->
    <!--                          Load Polymer Paper here                               -->
      <link rel="import" href="bower_components/paper-material/paper-material.html"> <!-- Load Polymer Paper-Material -->
      <link rel="import" href="bower_components/paper-behaviors/paper-button-behavior.html"> <!-- Load Polymer Paper-Behaviors -->
      <link rel="import" href="bower_components/paper-button/paper-button.html"> <!-- Load Polymer Paper-Button -->
      <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"> <!-- Load Polymer Paper-Icon-Button -->
      <link rel="import" href="bower_components/paper-input/paper-input.html"> <!-- Load Polymer Paper-Input -->
      <link rel="import" href="bower_components/paper-spinner/paper-spinner.html"> <!-- Load Polymer Paper-Spinner -->
      <link rel="import" href="bower_components/paper-radio-button/paper-radio-button.html"> <!-- Load Polymer Paper-Radio-Button -->
      <link rel="import" href="bower_components/paper-toast/paper-toast.html"> <!-- Load Polymer Paper-Toast -->
      <link rel="import" href="bower_components/paper-radio-group/paper-radio-group.html"> <!-- Load Polymer Paper-Radio-Group -->
      <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html"> <!-- Load Polymer Paper-Toolbar -->
      <title>RCPanel</title>
</head>
<body>
    <paper-material elevation="2" class="Paper" id="SideBarPaper" layered>

    </paper-material>
    <paper-material elevation="1" class="Paper" id="MainPaper">
        <paper-toolbar id="MenuBar">
            <paper-icon-button src="bower_components/material-design-icons/navigation/2x_web/ic_menu_white_36dp.png" id="MainMenuButton" class="MenuButton"></paper-icon-button>
                <div id="MenuDiv">
                        <p class="Headline">Welcome to RCPanel</p>
                </div>
        </paper-toolbar>
        <p>This is the development of RCPanel.<br />If you would like to help with this project, or test it, click <a href="https://github.com/RCPanel/main">here</a>.</p>
        <paper-toast text="You clicked the menu button!" id="ClickToast"></paper-toast>
    </paper-material>
</body>
</html>

而 JavaScript 代码就是这样的。

$(document).ready(function() {
prettyPrint();
var ButtonToast = $("#ClickToast");
var MenuButton = $("#MainMenubutton");
function ShowToast(Object) {
    Object.show();
};
MenuButton.on("tap",function() {
    ShowToast(ButtonToast);
});
});

我尝试过点击、点击、点击、点击，所有我能想到的事件都给出了。是不是我设置错了，还是事件完全错了？

【问题讨论】：

标签： javascript jquery html button polymer

【解决方案1】：

你使用的代码基本上不是 Javascript，而是 jquery。

所以，在 webcomponents-lite.js 之后的顶部附加以下标签。

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

这应该可行。

-- 更新--

这样代码就可以工作了。

<!DOCTYPE html>
<html lang="en">
<head>
<script src="//polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="http://kasperpeulen.github.io/PolymerElements/all.html">
<link rel="import" href="//elements.polymer-project.org/bower_components/paper-checkbox/paper-checkbox.html">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<paper-material elevation="1" class="Paper" id="MainPaper">
  <paper-toolbar id="MenuBar">
    <paper-icon-button src="bower_components/material-design-icons/navigation/2x_web/ic_menu_white_36dp.png" onclick="displaytost()" id="MainMenuButton" class="MenuButton"></paper-icon-button>
    <div id="MenuDiv">
      <p class="Headline">Welcome to RCPanel</p>
    </div>
  </paper-toolbar>
  <p>This is the development of RCPanel.<br />
    If you would like to help with this project, or test it, click <a href="https://github.com/RCPanel/main">here</a>.</p>
  <paper-toast text="You clicked the menu button!" id="ClickToast"></paper-toast>
</paper-material>
<paper-toast id="hello"
                 duration="6000"
                 text="Hello World"> </paper-toast>
<script>
function displaytost(){
  document.querySelector('#hello').show();
  console.log("button Clicked")
}
</script>
</body>
</html>

Test Here

【讨论】：

哦，对不起。我应该注意到这一点。该部分只是图标部分。我正在导入 jQuery。
大概是的。该脚本是外部的，导入在我的服务器上。对不起，我应该把我所有的代码都贴出来。
请通过发布所有必要的代码来编辑您的问题。
plnkr.co/edit/OTHfqsqpxbBy4w9UnXEF?p=preview 请检查一下。以这种方式一切正常。
是的。这样可行。有没有办法通过外部脚本让它工作？

【解决方案2】：

使用 jquery

$(document).ready(function() {
var MenuButton = $("#MainMenubutton").click(function(){
   document.querySelector('#ClickToast').show();`
});

聚合物 v1.0

添加纸张图标按钮标签

onclick="document.querySelector('#ClickToast').show()"

<paper-material elevation="1" class="Paper" id="MainPaper">
    <paper-toolbar id="MenuBar">
        <paper-icon-button src="bower_components/material-design-icons/navigation/2x_web/ic_menu_white_36dp.png" id="MainMenuButton" class="MenuButton" onclick="document.querySelector('#ClickToast').show()"></paper-icon-button>
            <div id="MenuDiv">
                    <p class="Headline">Welcome to RCPanel</p>
            </div>
    </paper-toolbar>
    <p>This is the development of RCPanel.<br />If you would like to help with this project, or test it, click <a href="https://github.com/RCPanel/main">here</a>.</p>
    <paper-toast text="You clicked the menu button!" id="ClickToast"></paper-toast>
</paper-material>

【讨论】：

您是否要修复 toast 显示或按钮触发问题？我现在不在一个可以尝试这个的地方，而且我已经对 jQuery 生疏了。
我已经尝试过这个和 Gowthamraj 的代码。当脚本是内部标签时，它显然只与点击事件相关联。外部脚本不起作用。但是，如果外部可以工作，那就更好了。