在按钮单击流星上调用 javascript 函数答案

【问题标题】：calling javascript function on button click meteor在按钮单击流星上调用 javascript 函数
【发布时间】：2014-09-12 05:17:52
【问题描述】：

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

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

【问题讨论】：

jquery 滑块是否显示在呈现的页面上？
@JeremyS。是的，它显示了

标签： javascript meteor

【解决方案1】：

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

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

【讨论】：

当按钮出现在body标签内时效果很好:)但是我的表单是jquery“horizontal-slider-form”，似乎当点击jquery表单上的按钮时，功能是不叫。对此有任何想法吗？
如果不查看实际代码并知道您使用的是哪个滑块，很难判断。您可以使用插件链接和完整的 .html 文件来更新任务吗？
好的，我更新了答案 - 看看是否有效。另外，请尝试从您的输入中删除 onclick="addme()"。

【解决方案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 */ }
});

【讨论】：

是的，但是我的流星应用程序有一个“不是”模板的表单。您还有其他建议/想法吗？ :)