无法提交在bootstrap popover上加载的表单

Question

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

我的问题是：

为什么以下jquery代码没有得到调用，如果我提交此表单来自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

不是一个好习惯，但你可以尝试一下：

  var wait = setInterval( function() {
    if( $("#"+formidd).size() ) {
        clearInterval(wait);
         $("#"+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");
            }
        });
    }
  }, 100);