我是 AJAX 的新手。当我单击复选框时，我想用mysql数据进行动态搜索。
在单击复选框之后，我成功地生成了一个ajax数据表，但是现在我面临一些奇怪的问题。
过程如下：
当我悬停在一个包含下拉菜单的图像上，其中的内容有一个delete按钮时，它将传递一个隐藏值并显示一个包含表单的boostrap模式弹出菜单。
表单提交按钮不工作。
你可以看到下面的图片

下面是我的代码：

$(document).ready(function() {
         $(':input[type=checkbox]').change(function() {
           var formData = $('#product').serialize();
           $.ajax({
             url: '/rawDataSearch',
             data: formData,
             type: 'post',
             dataType: 'json',
             success: function(data) {

                //alert("success");
                console.log(data);
                $("#mytable").empty();

                var str = '<table><thead>'+'<tr class="tr"><th class="th1" colspan="3">Program_Info</th><th></th><th class="th2" >CA</th><th class="th2">MRR</th><th class="th2">PCO</th><th class="th2">LIVE DESIGN</th><th class="th2">CO</th><th class="th2">RFQ RELEASE</th><th class="th2">PAA</th><th class="th2">AWARD</th><th class="th2">POR</th><th class="th2">POR Update</th><th class="th2">RTP/MP</th><th class="th2">FCS/FFS</th></tr></thead><tbody>';
                                $.each(data, function (key, value) {
                                    console.log(value.Sta_Adj_Award_Color);
                                    str = str + '<tr class="tr"><td class="td1">' + 
                                            //dropdown menu start//
                                                '<div class="dropdown" style="float: left">' + 
                                                  '<a href=#><img src="images/dots.png"></a>' + 
                                                    '<div class="dropdown-content" style="left:0">' + 
                                                        '<form action="/editProInfo" method="POST" novalidate >'+
                                                        '<input type="hidden" name="Id" value="' + value.Id + '" />'+
                                                         '<button class="dropbtn" style="background-color:transparent; border:0;margin-top: -8px;; margin-bottom: -25px;"><a>Edit</a></button></form>'+
                                                      '<button data-toggle="modal" data-target="#myModal" class="dropbtn1" title="' + value.Id +'" style="background-color:transparent; border:0;margin-bottom: -10px"><a>Delete</a></button></div>'+

                                                '</div>'+   
                                            //dropdown menu end//

                                            '</td>'+
                                            '<div id="myModal" class="modal fade">'+
                                                        '<div class="modal-dialog modal-dialog-centered" align="center">'+
                                                            '<div class="modal-content" align="center">'+
                                                              '<div class="modal-header" align="center">'+
                                                                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">'+'</button>'+
                                                                 '<h4 class="modal-title" align="center">'+'Confirmation'+'</h4>'+
                                                              '</div>'+
                                                              '<div class="modal-body">'+
                                                                '<div style="display:inline-block">'+
                                                                  '<form action="/delProInfo/del" method="POST" novalidate >'+ 
                                                                   '<input type="hidden" name="Id" class="hiddenValue" value="" />'+
                                                                    '<p align="center">'+'Do you want to delete the data ?'+'</p>'+
                                                                    '<p align="center" class="text-warning"><small>'+'If you sure to delete, please write some comments.'+'</small></p>'+
                                                                      '<textarea align="center" name="del_comment" rows="4" cols="50">'+'</textarea><br><br>'+
                                                                      '<div>'+
                                                                        '<button class="btn btn-primary">'+'Sure to Delete'+'</button>'+
                                                                      '</div>'+
                                                                   '</form>'+'<br>'+

                                                                        '<div>'+
                                                                            '<button class="btn btn-primary"  type="button" class="btn btn-default" data-dismiss="modal">'+'Close'+
                                                                           '</button>'+
                                                                       '</div>'+

                                                                '</div>'+
                                                            '</div>'+
                                                        '</div>'+
                                                    '</div>'+
                                                '</div>'+

                                            '<td class="td1">'+'<img src="'+value.AttColor+'"></td><td class="td2" style="border-right:#979797 solid 1px;">'+
                                            value.Program_Codename + '</td><td class="td">' + 'Status'+'</td><td class="td">'+
                                            '<img src="'+ value.Sta_Adj_CA_Color +'"></td><td class="td">'+
                                            '<img src="'+ value.Sta_Adj_MRR_Color +'"></td><td class="td">' +
                                            '<img src="'+ value.Sta_Adj_PCO_Color +'"></td><td class="td">' +
                                            '<img src="'+ value.Sta_Adj_LD_Color +'"></td><td class="td">' +
                                            '<img src="'+ value.Sta_Adj_CO_Color +'"></td><td class="td">' +
                                            '<img src="'+ value.Sta_Adj_RFQ_Release_Color +'"></td><td class="td">'+
                                            '<img src="'+ value.Sta_Adj_PAA_Color +'"></td><td class="td">'+
                                            '<img src="'+ value.Sta_Adj_Award_Color +'"></td><td class="td">'+
                                            '<img src="'+ value.Sta_Adj_POR_Color +'"></td><td class="td">'+
                                            '<img src="'+ value.Sta_Adj_POR_Update_Color +'"></td><td class="td">'+
                                            '<img src="'+ value.Sta_Adj_RTP_Color +'"></td><td class="td">'+
                                            '<img src="'+ value.Sta_Adj_FCS_Color +'"></td><td class="td">'+ '</td></tr>'+

                                });

                                str = str + '</tbody></table>';
                                $('#mytable').html(str);

                                $('.dropbtn1').click(function(){
                                var title  = $(this).attr('title')
                                alert(title);
                                $('.hiddenValue').val(title);
                              });

               },
             error: function(jqXHR, textStatus, errorThrown){
                 alert('error ' + textStatus + " " + errorThrown);  
              }
            });
          });
        });

我想我发现了问题：

在我的浏览器原始代码中，元素不在“form”标记中。但在我的代码中，我实际上把元素放在了正确的位置。为什么？