Question

我在前端和后端使用handlebarsJS（使用node.js），并使用AJAX将数据发布到node.js API，这是完美的工作（使用Postman测试）

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

现在，没有任何记录，单击输入按钮时没有任何图形发生，否则输入按钮适用于新的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

Answer 1

我认为，问题是，

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

您需要使用jquery'On'函数。

让我们说：你想将事件绑定到元素'B'，

您需要选择B的任何父元素，并使用jquery ON方法并将事件绑定到元素B下的所有“当前和将来”元素A.

解决方案：

1。）将id更改为类//不必要，但推荐。

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

Answer 2

您无法在没有表单的情况下发布数据，或者您可以通过创建json对象并将其发送到特定网址来执行此操作

Answer 3

你有没有试过像：

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

和

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

是否可以在手柄脚本模板中提交表单以发布更新？

3 个答案: