Question

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

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

我按照这篇文章创建了popover：
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();
          }

显示popover的链接：

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

最后是渲染popover的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标签）显示表单，我可以提交数据没问题。

我认为这与popover div被初始化为'display：none'有关，但是玩弄并使其可见并没有帮助。

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

谢谢

Answer 1

在摆弄后，我明白表单已添加到DOM中，但我认为使用on（）是处理此问题的方法。无论如何，我使用它的方式是使用它：

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

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

要检索表单的ID，我使用：

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

希望有所帮助。

从bootstrap popover调用jquery函数

1 个答案: