聚合物紙圖標按鈕將不會點擊

我已安裝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

聚合物紙圖標按鈕將不會點擊

回答

相關問題