聚合物纸图标按钮不会点击

时间：2015-07-22 02:39:25

标签： javascript jquery html button polymer

我已安装Polymer 1.0以用于我的网站。我在纸质工具栏元素中有一个纸质图标按钮元素。但是，纸张图标按钮不会触发任何事件。这是我的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);
});
});

我尝试过点击，点击，点击，点按，我能想到的所有事件。我有不正确的设置，或者事件是完全错误的吗？

2 个答案:

答案 0 :(得分：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

答案 1 :(得分：0)

使用jquery 

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

聚合物v1.0

添加paper-icon-button标签

的onclick =＆＃34; document.querySelector（＆＃39;＃ClickToast＆＃39）。显示（）＆＃34; 

<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>
相关问题
最新问题