提交按钮不能在ajax生成的表的模态弹出视图中工作
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了提交按钮不能在ajax生成的表的模态弹出视图中工作相关的知识，希望对你有一定的参考价值。
我是Ajax的新手。当我点击复选框时，我想用mysql数据进行动态搜索。
单击复选框后，我已成功生成ajax数据表，但现在我遇到了一些奇怪的问题。
过程如下：
当我将包含下拉菜单的图像悬停在哪个内容中有删除按钮时，它将传递一个隐藏值并显示包含表单的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);
}
});
});
});我认为我发现了问题：
答案
这样做：
$(document).on('click', ".buttonclassname", function(){
//you code
})
另一答案
我解决了这个问题，我认为它是html中的父元素标记问题。我尝试了很多方法，但我仍然没有找到解决这个问题的方法，所以我采用了另一种方法来解决这个问题。我的解决方案是：当用户单击确定删除按钮时添加ajax调用，并在用户成功删除项目时返回主页。
以上是关于提交按钮不能在ajax生成的表的模态弹出视图中工作的主要内容，如果未能解决你的问题，请参考以下文章
如何构建 django ajax 模态弹出表单（带有服务器端表单）？
Laravel 将数据从 ajax 传递到位于单独文件中的模态视图，导致模态视图无法呈现
python测试开发django-121.bootstrap-table弹出模态框修表格数据提交