Question

我在流星应用程序中实现了一个jquery滑块表单。当我点击表单的提交按钮时，它应该调用clent.js文件中的javascript函数addme（）。但它没有用。此外，表单不是模板。我知道使用template.templatename.events我们可以执行事件。但是，我很好奇这是正常的＆＃34; onclick＆＃34;事件在流星中起作用？

我使用过这个网站的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");}
  }

Answer 1

如果您没有模板，可以使用Template.body。这是一个简单的例子：

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

Answer 2

您可以在给定模板中设置事件处理程序。看看template_events

更新

您可以将表单移动到模板，然后在该

上注册该事件

main.html中

<body>
    {{> myForm}}
<body>

<template name="myForm">
    <form>
        <!-- your form -->
        <button id="button">BUTTON</button>
    </form>
</template>

MY-form.js

Template.myForm.events({
    'click #button': function(e){ /* xxx */ }
});

调用按钮上的javascript函数点击流星

2 个答案:

更新