如何解决如何为每个动态创建的“搜索结果块”添加弹出窗口
当我单击每个搜索结果块上的“查看”按钮时，我需要显示一个弹出窗口。我尝试使用不同的Java脚本编码，但按钮/弹出窗口不起作用。在下面的代码中，我仅添加了按钮（“输出+ =”按钮id =“ show”> VIEW '“），有人可以告诉我如何向该“视图”按钮添加弹出窗口吗？类似于此https://codepen.io/joshuaward/pen/jYZXGo的弹出窗口（但不需要CSS装饰）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>INVOICE search</title>
<style>
.poo{min-height:20px;padding:20px;background-color:#f5f5f5;border:10px solid white;border-radius:30px;-webkit-box-shadow:inset 0 1px 1px rgba(0,.05);box-shadow:inset 0 1px 1px rgba(0,.05)}
</style>
</head>
<body>
<div class="container" style="padding:50px 250px;">
<h1>Live Search</h1>
<div id="header"></div>
<form role="form">
<div class="form-group">
<input type="input" class="form-control input-lg" id="txt-search" placeholder="Type your search character">
</div>
</form>
<div id="filter-records" style=""></div>
<div id="footer"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#header').load('../header-ads.html');
$('#footer').load('../footer-ads.html');
var data = [{"DATE":"2019-05-27T18:30:00.000Z","DESPATCH NO":2,"NAME":"3Com Corp","VEHICLE NO":"32425","ITEM1":"DAT","NO OF PACKS1":"432","IMASS / IQTY OF A PACK1":"5","UNIT PRICE1":"45","REJECTIONS1":"6","ITEM2":"FAJ","NO OF PACKS2":"65","IMASS / IQTY OF A PACK2":"56","UNIT PRICE2":"56","REJECTIONS2":"56646","ITEM3":"FAP","NO OF PACKS3":"78","IMASS / IQTY OF A PACK3":"786","UNIT PRICE3":"85","REJECTIONS3":"676","ITEM4":"7","NO OF PACKS4":"676","IMASS / IQTY OF A PACK4":"4634643","UNIT PRICE4":"46436","REJECTIONS4":"6436","ITEM5":"656","NO OF PACKS5":"3466","IMASS / IQTY OF A PACK5":"646","UNIT PRICE5":"46436","REJECTIONS5":"46436","Reciever Name":"FDGDGH","Reciever Id no ":"56","REMARKS":"FGGH","PREPARED BY":"GFH","INVOICE NO":"HG656","INVOICE SUBMITTED DATE":"545"},{"DATE":"2019-05-28T18:30:00.000Z","DESPATCH NO":3,"NAME":"3M Company","VEHICLE NO":"32426","ITEM1":"DAR","NO OF PACKS1":"","IMASS / IQTY OF A PACK1":"","UNIT PRICE1":"","REJECTIONS1":"","ITEM2":"FAP","NO OF PACKS2":"","IMASS / IQTY OF A PACK2":"","UNIT PRICE2":"","REJECTIONS2":"","ITEM3":"DAT","NO OF PACKS3":"","IMASS / IQTY OF A PACK3":"","UNIT PRICE3":"","REJECTIONS3":"","ITEM4":"","NO OF PACKS4":"","IMASS / IQTY OF A PACK4":"","UNIT PRICE4":"","REJECTIONS4":"","ITEM5":"","NO OF PACKS5":"","IMASS / IQTY OF A PACK5":"","UNIT PRICE5":"","REJECTIONS5":"","Reciever Name":"","Reciever Id no ":"","REMARKS":"","PREPARED BY":"","INVOICE NO":"","INVOICE SUBMITTED DATE":""},{"DATE":"2019-05-29T18:30:00.000Z","DESPATCH NO":4,"NAME":"A.G. Edwards Inc.","VEHICLE NO":"","ITEM1":"JAR","ITEM2":"JAR","ITEM3":"FAJ",{"DATE":"2019-05-30T18:30:00.000Z","DESPATCH NO":5,"NAME":"Abbott Laboratories","ITEM1":"FAP","ITEM2":"DAT","ITEM3":"DAR",{"DATE":"2019-05-31T18:30:00.000Z","DESPATCH NO":6,"NAME":"Abercrombie & Fitch Co.","ITEM1":"FAJ","ITEM2":"DAR","ITEM3":"JAR",{"DATE":"2019-06-01T18:30:00.000Z","DESPATCH NO":7,"NAME":"ABM Industries Incorporated",{"DATE":"2019-06-02T18:30:00.000Z","DESPATCH NO":8,"NAME":"Ace Hardware Corporation","INVOICE SUBMITTED DATE":""}]
$('#txt-search').keyup(function(){
var searchField = $(this).val();
if(searchField === '') {
$('#filter-records').html('');
return;
}
var regex = new RegExp(searchField,"i");
var output = '<div class="row">';
var count = 1;
$.each(data,function(key,val){
if ((val.DATE.search(regex) != -1) || (val.NAME.search(regex) != -1) || (val.ITEM1.search(regex) != -1) || (val.ITEM2.search(regex) != -1) || (val.ITEM3.search(regex) != -1) || (val.ITEM4.search(regex) != -1) || (val.ITEM5.search(regex) != -1)) {
output += '<div class="col-md-6 poo">';
output += '<div class="col-md-3"><img class="img-responsive" src="https://catnop.com/a.png" alt="'+ val.NAME +'" /></div>';
output += '<div class="col-md-7">';
output += '<h5>' + val.NAME + '</h5>';
output += '<p>' + val.DATE + '</p>'
output += '<p>' + val.ITEM1 + ' '
output += ',' + val.ITEM2 + ' '
output += ',' + val.ITEM3 + ' '
output += ',' + val.ITEM4 + ' '
output += ',' + val.ITEM5 + '</p>'
output += '<button id="show">VIEW</button>'
output += '</div>';
output += '</div>';
if(count%2 == 0){
output += '</div><div class="row">'
}
count++;
}
});
output += '</div>';
$('#filter-records').html(output);
});
});
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。