Question

我想在popover中创建一个表单，并使用jQuery和Ajax提交表单（在提交表单时进行一些计算）。但不知何故，jQuery根本不起作用。我在铁轨上使用红宝石。

以下是我在视图上的代码：

    %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);
                         })
                });
            });

当我点击＆＃34;点击＆＃34;按钮，甚至没有警报（1）出现，所以我认为jQuery不起作用，但我无法解决出错的问题？

Answer 1

使用它，这将绑定ajax加载内容中的提交事件

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

Answer 2

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

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

jQuery不能在popover中使用我的表单

2 个答案: