可以从车把脚本模板中提交表单以发布更新吗？答案

【问题标题】：Can a form be submitted from within a handlebars script template to post an update?可以从车把脚本模板中提交表单以发布更新吗？
【发布时间】：2014-05-24 14:39:16
【问题描述】：

我在前端和后端都使用了 handlebarsJS（使用 node.js），并使用 AJAX 将数据发布到 node.js API，它运行良好（通过 Postman 测试）

有没有办法在客户端手把模板脚本中提交表单？

现在，没有任何日志记录，并且在单击输入按钮时没有任何图形发生，否则它适用于新的 ajax 帖子，当然没有把手脚本..

这是 HTML/HandlebarsJS：

<div id="allStories" class="allStories"> </div><!--/allStories-->
<script id="storyTemplate" type="text/x-handlebars-template">

  <div class="thisness">
      <div class="stories">

          <div class="new" id="new">
            \{{#each stories}}
              <div class="row moreTop1">
                <div class="col-sm-4 col-sm-offset-4">
                  <form id="updateStoryForm">
                    <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                      </span>
                      <input type="hidden" id="storyID" value="\{{ _id }}"/>
                      <input type="text" class="form-control" id="currentStory" value="\{{ story }}">
                      <span class="input-group-addon">
                        <input type="button" id="UpdateStory">
                      </span>
                    </div><!-- /input-group -->
                  </form>
                </div><!-- /.col-lg-6 -->
              </div><!-- /.row -->
            \{{/each}}
          </div>

      </div> <!--/stories-->
    </div> <!--/thisness-->

</script>

这里是 AJAX 更新：

$(document).ready(function(){

  // UPDATE
  // * * * * * * * * * * * * * * * * * * * * * * * * * * *

  // UpdateStory button clicks
  $( "#UpdateStory" ).click(function(e) {

      e.preventDefault();

      // story elements for API
      var id = $( "#storyID" ).val();
      var story = $( "#currentStory" ).val();
      var datetimeNow = new Date();

      if($("#archiveCheck").is(":checked")) {
          archive = true;
      } else {
          archive = false;
      }

      console.log(id);
      console.log(story);
      console.log(datetimeNow);
      console.log(archive);

      var AjaxPostData = {
          id : id,
          story : story,
          datetimeNow : datetimeNow,
          archive : archive
      };

      console.log(AjaxPostData);

      // if the story field has content
      if (story.length != 0) {
        console.log('there is a story: ' + story);
          // make an ajax call
          $.ajax({
          dataType: 'json',
          data: AjaxPostData,
          type: 'post',
              url:"http://localhost:4200/api/v1/stories" + id,
              success: refreshNewStories,
              error: foundAllNewFailure
          });
      };

      console.log(AjaxPostData.id);

  }); // UPDATE


}); // doc is ready

【问题讨论】：

从 ID 选择器更改为类选择器是否有效？由于您在 DOM 中循环，#UpdateStory id 不会是唯一的。尝试.UpdateStory 并将其更改为一个类。

标签： jquery ajax forms templates handlebars.js

【解决方案1】：

我认为，问题是，

在“事件”绑定发生后，车把将表单插入到 DOM 中。所以在事件绑定期间，当 jquery 查找 updatestory 元素时它不存在。

您需要使用 jquery 'On' 功能。

假设：您想将事件绑定到元素“B”，

您需要选择B的任何父元素，并使用jquery ON方法并将事件绑定到元素B下的所有'现在和未来'元素A。

解决办法：

1.) 将 id 更改为 class //不需要，但推荐。

2.)

// The parent elment should be dom element which is present in the dom. 
//You can move up to even $('document')

   var parentElment = $('currently-existing-parent-element-of-the-button-you-want-to-bind-the-event-to'); //: P 
    parentElement.on('click','.UpdateStory',function(e) {

                                                       });

例如：

$('document').on('click', '.UpdateStory', function(event) {

    event.preventDefault();
    console.log('xyz');
}
);

注意：不要复制粘贴代码，它不会起作用，它只是为了解释。

参考：jQuery On() - EventHandler Attachment

【讨论】：

即使将表单 id="UpdateStoryForm" 更改为类，并将事件更改为 $(".updateStoryForm").on('click','.UpdateStory',function(e) { 并在此 onClick 事件之后添加一个 console.log，控制台中没有任何记录？！还有其他建议吗？
updateStoryForm 是父级？并且没有使用车把插入这个父级？
updateStoryForm 也使用把手插入。您需要向上移动并将其附加到 dom 中已经存在的 dom 元素，它甚至可以是 $('document')?你找到我了吗？
好吧，直接父级是span class="input-group-addon">，但这不包括输入字段，尽管我也尝试过这样做..
$('document').on('click','.UpdateStory',function(event){event.preventDefault(); console.log('xyz');});

【解决方案2】：

没有表单不能发布数据，也可以通过创建json对象发送到具体的url来实现

【讨论】：

【解决方案3】：

您是否尝试过类似的方法：

<form name="input" action="http://localhost:4200/api/v1/stories" method="post">

和

<input type="submit" value="Submit">

【讨论】：