提交在bootstrap popover上加载的表单

Question

我有动态创建的行，当用户点击添加按钮时，每行都有一个添加按钮，然后动态创建的表单将被加载到bootstrap propover上。
 FIDDLE DEMO

我的问题是：

为什么这段代码没有接到电话？ 基本上我正在提交此表单来自bootstrap popover？

 ...............
 ...............
console.log($("#"+formidd));// NOTE: i have accurate form id
         $("#"+formidd).validate({
            rules: {
                sproject_name: {
                    minlength: 3,
                    maxlength: 15,
                    required: true
                }, tooltip_options: {
                    sproject_name: {placement: 'center', html: true, trigger: 'focus'}
                }
            },
            submitHandler: function(form) { 
                alert("form submit");
            }
        });
     ...............
     ...............

任何帮助都将受到高度赞赏。请帮助我......

---

表单看起来像这样：（我想验证它并在用户按ENTER键时提交它）

---

我的html数据如下所示：

<div id="project-div-id"> 
        <ul style="padding: 0px 0 2px;margin-left: 0px;">
         <li><span class="slilink"> tour </span>
            <img class="del_btn" src="/images/icons/add.gif"> 
              <form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="160subproj" id="160subproj"  style="display:none;">
                  <input type="text" value="1st">
                   <input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >   
              </form>
         </li>

         <li><span class="slilink"> personal</span>
            <img class="del_btn" src="/images/icons/add.gif"> 
              <form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="161subproj" id="161subproj"  style="display:none;">
                  <input type="text" value="2st">
                   <input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >   
              </form>
         </li>

    <li><span class="slilink"> business</span>
            <img class="del_btn" src="/images/icons/add.gif"> 
              <form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="162subproj" id="162subproj"  style="display:none;">
                  <input type="text" value="3rd form">
                   <input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >   
              </form>
         </li>
     </div>

---

这是我的完整jquery代码：

<script type="text/javascript">
     $(document).ready(function() { var formidd='';

        $('.add_btn').popover({
            html: true,
             title: function () {
                 formidd=$(this).parent().find('.projform_id').html();
                return $(this).parent().find('.sub_proj_head').html(); 
            }, 
            content: function() { 
                return $(this).parent().find('.sub_proj_content').html();
            }

        });

        $('.add_btn').click(function(e) { 

             console.log($("#"+formidd));//i have loaded form id
         $("#"+formidd).validate({
            rules: {
                sproject_name: {
                    minlength: 3,
                    maxlength: 15,
                    required: true
                }, tooltip_options: {
                    sproject_name: {placement: 'center', html: true, trigger: 'focus'}
                }
            },
            submitHandler: function(form) { 
                alert("form submit");
            }
        });



            $('.add_btn').not(this).popover('hide');
            e.stopPropagation();
        });

        $(document).click(function(e) {
            if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
                $('.add_btn').popover('hide');
            }  
        });


    });
</script>

Answer 1

我想我明白了你要做的事情。默认情况下，输入按钮不起作用，除非表单中有某个<input type='submit' />。

您可以尝试的一些hackery是在输入后立即放置一个提交按钮，给它一个类似＆＃34;隐形＆＃34;的类名，并设置该类以删除所有边框，边距，填充等...警告，设置display:none将无效，因为某些浏览器会有效删除元素。

例如：jsfiddle

编辑：我只是在小提琴中工作，但想法是一样的。表单中必须有提交输入。