提交按钮在ajax生成的表格的模式弹出视图中不起作用

时间：2018-09-05 02:19:39

标签： jquery mysql ajax modal-dialog bootstrap-modal

我是Ajax的新手。 我想在单击复选框时使用MySQL数据进行动态搜索。

单击复选框后，我已经成功生成了一个ajax数据表，但是现在我遇到了一些奇怪的问题。

过程如下：

当我将鼠标悬停在一个包含下拉菜单的图像上时，该菜单的内容带有一个删除按钮，它将传递一个隐藏值并显示一个包含表单的boostrap模式弹出菜单。

表单提交按钮不起作用。

您可以看到下图 enter image description here

下面是我的代码：

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

我认为我发现了问题： enter image description here 在我的浏览器原始代码中，元素不在“ form”标签中。 但是在我的代码中，我实际上将元素放置在正确的位置。 为什么？

2 个答案:

答案 0 :(得分：0)

这样做：

$(document).on('click', ".buttonclassname", function(){
  //you code
})

答案 1 :(得分：0)

我解决了这个问题，我认为这是html中的父元素标签问题。 我尝试了许多方法，但仍然找不到解决该问题的解决方案，因此我采用了另一种方法来解决此问题。 我的解决方案是： 当用户单击“确定删除”按钮时，我添加了一个ajax调用，并在用户成功删除该项目时返回到主页。

相关问题
最新问题