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

我已安装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); 
}); 
});

我尝试了点击，onclick，点击，点击，我能想到的所有事件都给出了。有没有我设置不正确，或事件完全错误？

来源

2015-07-22 TickTock

你使用的基本代码不是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

来源

2015-07-22 05:48:07

哦，对不起。我应该注意到这一点。该部分只是图标部分。我正在导入jQuery。 – TickTock

http://plnkr.co/edit/OTHfqsqpxbBy4w9UnXEF?p=preview就是你这样做的吗？ –

大概是的。脚本是外部的，导入在我的服务器上。对不起，我应该发布我的所有代码。 – TickTock

使用jQuery

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

聚合物1.0

添加纸图标按钮标签

的onclick = “document.querySelector（ '＃ClickToast'）。显示（）”

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

来源

2015-07-22 05:40:37 kyunghwanjung

你试图修复敬酒放映或按钮点火？我现在不在我可以试试这个的地方，而且我已经生锈了jQuery。 – TickTock

@TickTock尝试脚本更改我的代码 – kyunghwanjung

我试过这个和Gowthamraj的代码。当脚本是内部标签时，它显然只与点击事件相关联。外部脚本不起作用。但是，如果外部可行，情况会好得多。 – TickTock

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

回答

相关问题