gpt4 book ai didi

javascript - 在按钮上调用 javascript 函数单击 meteor

转载 作者:搜寻专家 更新时间:2023-11-01 04:51:53 25 4
gpt4 key购买 nike

我在 meteor 应用程序中实现了一个 jquery slider 表单。当我点击表单的提交按钮时,它应该调用 clent.js 文件中的 javascript 函数 addme()。但它不起作用。此外,表单不是模板。我知道使用 template.templatename.events 我们可以执行事件。但是,我很好奇正常的“onclick”事件在 meteor 中是否有效?

我使用了这个站点的 jquery 菜单: http://alijafarian.com/jquery-horizontal-slideout-menu/

和我的 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">&times;</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");}
}

最佳答案

如果没有模板,可以使用Template.body .这是一个简单的例子:

if (Meteor.isClient) {
Template.body.events({
'click .AddPlaceButton': function (e) {
e.preventDefault();
console.log("You pressed the button");
}
});
}

关于javascript - 在按钮上调用 javascript 函数单击 meteor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24869542/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com