从bootstrap弹出窗口调用jquery函数

这是我的第一篇文章，我希望它会包含足够的信息来解释我的问题。从bootstrap弹出窗口调用jquery函数

正如标题所示，我正在努力从popover中的窗体调用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来渲染popover：

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

调试时，我添加了一个警报提交呼叫，但没有显示警报。
让我感到困惑的是，如果我只是在同一页面上的任何地方显示表格（使用相同的酥脆形式标签），我可以提交数据没有问题。

我认为它与popover div被初始化为“display：none”相关联，但是四处播放并使其可见并没有帮助。

要解决此问题，我使用jquery显示/隐藏div，但我更愿意使用弹出窗口。我希望这已经足够完整。

感谢

来源

2013-01-11 Olivier Florentin

摸索之后，我明白的形式添加到DOM，但我认为，使用上（）是处理这个问题的方法。无论如何，我的方式得到它正在使用此工作：

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

的“.ajax_button”是我添加的按钮形式的创作类。

要检索形式的ID，我用这个：

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

希望有所帮助。

来源

2013-01-12 20:34:01

从bootstrap弹出窗口调用jquery函数

回答

相关问题