2

这是我的第一篇文章，我希望它包含足够的信息来解释我的问题。

正如标题所示，我正在努力从弹出框内的表单中调用 jquery 函数。

我按照这篇文章创建了弹出框：
http ://www.thoughtdelimited.org/thoughts/post.cfm/simple-technique-for-creating-multiple-twitter-bootstrap-popovers

这将创建以下代码：

          $(".pop").each(function() {
              var $pElem= $(this);
              $pElem.popover(
                      {
                          html:true,
                          title: getPopTitle($pElem.attr("id")),
                          content: getPopContent($pElem.attr("id"))
                      }
              );
          });

          function getPopTitle(target) {
              return $("#" + target + "_content > div.popTitle").html();
          }

          function getPopContent(target) {
              return $("#" + target + "_content > div.popContent").html();
          }

显示弹出框的链接：

<a href="" style="" id="contact" class="pop"><i class="icon-pencil"></i> Test</a>

最后是呈现弹出框的 div：

<div id="contact_content">
     <div id="popTitle" class="popTitle">
          title sample
     </div>
     <div id="popContent" class="popContent">
          {% crispy quick_add %}
     </div>
</div>

我试图手动创建表单以在 div 中进行测试，但它没有任何区别。

在提交表单时，我想调用一个 jquery 函数来启动一个 ajax 调用。
这看起来像这样：

         $('.ajax_forms').on('submit',function(e){

              var form_id = $(this).attr('id');
              alert(form_id);
              var errors = 0;
              $('#'+form_id+' input[type=text]').each(function(){
                  if (!$(this).val()){
                      errors++;
                  }
              });
              if (errors > 0) {
                  ajax_alert('error','All fields are mandatory.');
                  return false;
              }
              e.preventDefault();

              $.ajax({
                  type: 'POST',
                  url: '/forms/'+form_id+'/',
                  data: $('#'+form_id).serialize(),
                  success: function(data)
                  {
                      ajax_alert('success','The data is saved.');
                  }
              });
              return false;
          });

调试时，我在提交调用中添加了一个警报，但没有显示任何警报。
令我困惑的是，如果我只是在同一页面中的任何位置（使用相同的crispy-forms 标签）显示表单，我可以毫无问题地提交数据。

我认为它与被初始化为“显示：无”的弹出框 div 相关联，但玩弄并使其可见并无济于事。

为了解决这个问题，我使用 jquery 显示/隐藏 div，但我更喜欢使用 popover。我希望这已经足够完整了。

谢谢

4

1 回答 1

2

在摆弄之后，我了解到表单已添加到 DOM，但我认为使用 on() 是处理此问题的方法。无论如何，我让它工作的方式是使用这个：

$('body').on('click','button.ajax_button',function(e){
   // your stuff here
});

'.ajax_button' 是我添加到表单创建按钮的类。

要检索表单的 id，我使用这个：

var form_id = $(this).closest('form').attr("id");

希望有帮助。

于 2013-01-12T20:34:01.030 回答