聚合物纸图标按钮不开火点击
Polymer paper-icon-button won't fire click
我已经安装了聚合物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);
});
});
我试过on-tap, onclick, click, tap，所有我能想到的事件。是我设置错了，还是事件完全错了?
基本上你使用的代码不是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>
测试
使用jquery
$(document).ready(function() {
var MenuButton = $("#MainMenubutton").click(function(){
document.querySelector('#ClickToast').show();`
});
add paper-icon-button tag
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>
相关文章：
- 创建一个类似链接的按钮，并通过Javascript函数打开一个新的弹出窗口
- 正在添加'X'按钮，在文本字段旁边使用javascript
- 多个单选按钮组相互干扰
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- Javascript按钮下拉列表
- jquery试图按名称获取按钮位置
- 漂亮照片图片库中的Facebook赞按钮
- 扩展移相器按钮类不工作
- 通过单击表单中的按钮，在代码生成中使用javascript生成字母数字代码
- 单击按钮以等待单击按钮
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 单击按钮后如何逐个调用分区，上一个分区将隐藏
- 如何从querySelectorAll中获取按钮类型
- 第二次点击jQuery按钮是't开火
- jQuery单选按钮检查操作不'不要开火
- javascript对按钮的点击事件不会;不要开火
- 开火按钮动作，然后隐藏
- ASP.. NET MVC和Javascript -提交按钮提交表单，onclick @URL.动作没有开火
- 单击“不开火”按钮
- Tab键到ASP按钮上，然后按enter键启动按钮;不要点击开火
