JQuery DOM 操作和事件触发答案

【问题标题】：JQuery DOM manipulation and event triggerJQuery DOM 操作和事件触发
【发布时间】：2015-06-03 01:54:58
【问题描述】：

我正在尝试为新的 Rails 应用程序构建一个简单的就地编辑功能。为此，我需要进行更改以保存数据。

如何从顶部获取 div 信息并将其输入到我的隐藏表单 :content 中以保存我的就地编辑更改？

我当前的show.html页面如下

<p id="notice"><%= notice %></p>

<div id="body_editable" class="editable">
  <%= @article.content %>
</div>

<%= form_for(@article) do |f| %>
  <%= f.label :content %><br>
  <%= f.hidden_field :content %>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<script>
  var editor = new MediumEditor('.editable');
</script>

我假设需要以下内容：

//on page load to bring the data to the div
$('#body_editable').html($('#article_content').val());

//on save to take the div and put it in the form for :content
$('#article_content').val(editor.serialize().body_editable.value);

但我不确定如何使用 rails 提交按钮触发保存事件

【问题讨论】：

一个更具描述性的标题会很好。
对不起@jthomas，我开始打字了，在我的困惑中再也没有回过头来在标题中正确解释。

标签： javascript jquery html ruby-on-rails ruby-on-rails-4

【解决方案1】：

尝试：

 $('select your submit').click(function(e){
     e.preventDefault();
     $('#article_content').val(editor.serialize().body_editable.value);
     $(this).closest('form').submit();
 });

【讨论】：

【解决方案2】：

捕获表单的提交事件，将值复制过来，然后提交()。

类似这样的：

$('form[id^="edit_article"]').on('submit', function(e) {
  e.preventDefault();
  $('#article_content').val(editor.serialize().body_editable.value);
  $(this).submit()
  return false;
});

【讨论】：

【解决方案3】：

虽然亚历克斯的回答会奏效，但这样做更安全：

$('form[for=article]').submit(function(e){
  e.preventDefault();
  $('hidden-field').val($('#body_editable').text());
  $(this).submit();
});

这样，它通过使用返回值而不是获取本机值的函数来获取特定元素并避免内存泄漏，当您将事物设置为 someElement.value 时，它会在内存中分配一个新地址。

【讨论】：

我已经尝试将它输入到articles.js 中，但它仍然会提交当前的articles.content 而不会切换它。我已经使用 Rails 有一段时间了，但对 javascript 知之甚少。我什至无法判断提交按钮是否触发了 js。如何将提交按钮绑定到 javascript？
$(<theForm>).submit(callback) 将同时处理点击提交按钮，当它是type=submit 时，当点击进入焦点表单时。