jQuery 在弹出窗口中无法使用我的表单答案

【问题标题】：jQuery is not working with my form in popoverjQuery 在弹出窗口中无法使用我的表单
【发布时间】：2014-11-25 07:18:06
【问题描述】：

我想在弹出框内创建一个表单并使用 jQuery 和 Ajax 提交表单（在提交表单时进行一些计算）。但不知何故，jQuery 根本不起作用。我正在使用 ruby on rails。

这是我在视图上的代码：

    %a.btn.btn-small{:id => "example", "data-toggle" => "popover", :type => "button"}
        %i.icon-calendar
            .head.hide Do Something
            .content.hide
               =form_for :object, action: '#', :html => { :class => "form", remote: true} do |c|
                  =c.number_field :var_1
                  =c.number_field :var_2
               %buttion.btn.btn-default{id: "submit", type: "button"}Click

这是我在 app/assets/javascript 下的 js 和 jQuery 代码，

            $(function () {
              $('#example').popover({ 
                html : true,
                title: function () {
                    return $(this).parent().find('.head').html();
                },
                content: function () {
                    return $(this).parent().find('.content').html();
                }
              }).popover('show');
            });


            $(function(){
                $('.form').submit(function(e) {
                        alert(1);
                    e.preventDefault()
                    var datastring = $(this).serializeArray();
                    datastring.push({name:"post", value:"Post"});

                    var request = $.ajax({
                        type: "POST",
                        url: $(this).attr('action'),
                        data: datastring});
                        request.success(function(data) {
                        console.log(data);
                         })
                });
            });

当我单击“单击”按钮时，甚至没有显示 alert(1)，所以我认为 jQuery 无法正常工作，但我不知道出了什么问题？

【问题讨论】：

你可以发布 HTML 代码而不是服务器模板吗？
在控制台中附加提交事件之前检查 $('.form') 是否存在。

标签： javascript jquery ruby-on-rails ajax twitter-bootstrap

【解决方案1】：

改用这个，这将在 ajax 加载的内容中绑定提交事件

$('body').on('submit', '.form', function(){
  # your code
});

【讨论】：

【解决方案2】：

如果您遵循最佳实践，那么您应该像这样编写 jQuery：

$(document).ready(function(){
   $('body').on('submit', '.form', function(){
     // your code
  });
});

【讨论】：