javascript 在按钮单击流星上调用javascript函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24869542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
calling javascript function on button click meteor
提问by nikhilk
I am having a jquery slider form implemented in a meteor app. When i click on submit button of form, it should call javascript function addme() present in clent.js file. But it is not working. Also, the form is not a template. I know using template.templatename.events we can perform events. But, I'm curious that does normal "onclick" event works in meteor?
我在流星应用程序中实现了一个 jquery 滑块表单。当我点击表单的提交按钮时，它应该调用存在于 clent.js 文件中的 javascript 函数 addme()。但它不起作用。此外，表单不是模板。我知道使用 template.templatename.events 我们可以执行事件。但是，我很好奇普通的“onclick”事件在流星中是否有效？
I have used jquery menu from this site: http://alijafarian.com/jquery-horizontal-slideout-menu/
我使用过这个网站的 jquery 菜单：http: //alijafarian.com/jquery-horizontal-slideout-menu/
and My my.html code:
和我的 my.html 代码：
<head>
<title>myapp</title>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAlKvABq34UidJ2uZrjnnKTvFAyoZjFNQc&sensor=FALSE&libraries=places"> </script>
<link rel="stylesheet" type="text/css" href="myapp.css" >
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link href='http://fonts.googleapis.com/css?family=Oswald:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'>
<script type="text/javascript" src="client.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="markerclusterer.js"></script>
</head>
<body>
<div class="header">
<a href="#" class="slideout-menu-toggle"><i class="fa fa-bars"></i> Bank Innovation Map</a>
</div>
{{> maps}}
<div class="slideout-menu">
<h3>Add New Innovation Center <a href="#" class="slideout-menu-toggle">×</a></h3>
<div id="locationField">
<input id="autocomplete" placeholder="Enter the address"
onFocus="geolocate()" type="text"/>
</div>
<table id="address">
<tr>
<td class="label">Street Line 1</td>
<td class="slimField"><input class="field" id="street_number" disabled="true"/></td>
<tr>
<td class="label">Street Line 2</td>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"/></td>
</tr>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true"/></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true"/></td>
<tr><td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code"
disabled="true"/></td>
</tr></tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"/></td>
</tr>
<tr>
<td></td>
<td>
<!-- <button type="submit">Click me here!</button> -->
<input type="submit" class="AddPlaceButton" value="submit" onclick="addme()" />
</td>
<td></td>
</tr>
</table>
</div>
<!--/.slideout-menu-->
<script type="text/javascript">
$(document).ready(function () {
$('.slideout-menu-toggle').on('click', function(event){
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
left: "0px"
});
} else {
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 250);
}
});
});
</script>
</body>
<template name="maps">
<!-- <h1> Bank Innovation Map</h1>-->
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</template>
My client.js code:
if (Meteor.isClient) {
function addme(){console.log("function called");}
}
回答by David Weldon
If you don't have a template, you can use Template.body. Here's a simple example:
如果您没有模板，则可以使用Template.body。这是一个简单的例子：
if (Meteor.isClient) {
Template.body.events({
'click .AddPlaceButton': function (e) {
e.preventDefault();
console.log("You pressed the button");
}
});
}
回答by waitingkuo
You can set the event handler in a given template. Take a look at template_events
您可以在给定模板中设置事件处理程序。看一下template_events
Updated
更新
You can move the form to a template, then register the event on that
您可以将表单移动到模板，然后在该模板上注册事件
main.html
主文件
<body>
{{> myForm}}
<body>
<template name="myForm">
<form>
<!-- your form -->
<button id="button">BUTTON</button>
</form>
</template>
my-form.js
我的-form.js
Template.myForm.events({
'click #button': function(e){ /* xxx */ }
});
