【发布时间】：2017-09-12 01:57:24
【问题描述】：
以下代码显示了一个文档类型列表，其中每个类型都有一个按钮，允许上传文档并将文档类型用作变量（用于不同目的）。
每个按钮上的modal-addDoc 类触发打开带有表单的模式，以便收集需要与文件一起记录的信息。
问题：
当单击某个文档类型的按钮，然后取消模式（用户打开了错误类型的文档），然后单击另一个按钮，然后单击模式中的“注册者”按钮，操作对于取消的类型和最新的类型都被触发。出于演示目的，在下面的 sn-p 中，该操作只是一个警报。
例子：
- 点击 CRANAP 行中的绿色按钮
- 点击“annuler”（=取消）
- 点击 CRHOSP 行中的绿色按钮
- 点击“注册者”
您将收到 2 个警报：一个用于 CRANAP，另一个用于 CRHOSP。
我需要了解为什么仍然会触发第一个警报（因为我有更多具有相同结构和问题的代码）。
欢迎提出任何想法！
$('.modal-addDoc').click(function() {
var uidTypeDoc = $(this).attr('data-uidTypeDoc');
var uidQuest = $(this).attr('data-uidQuest');
$("[id^=addDoc]").attr("id","addDoc-"+uidQuest+"-"+uidTypeDoc);
$('#modal-addDoc').modal();
$("#uidTypeDoc").text(" de type "+uidTypeDoc);
var addDocId = "addDoc-"+uidQuest+"-"+uidTypeDoc;
console.log(addDocId);
$("#"+addDocId).click(function() {
alert(addDocId)
})
});<head>
<title>Dossier de l'enquête n°2038 - PRIMEV'R</title>
<meta http-equiv="Content-type" content="text/html" charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="https://primevr-preprod.constances.fr/_assets/bootstrap/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="https://primevr-preprod.constances.fr/_dataTools/css/dataTools.css">
<link type="text/css" rel="stylesheet" href="https://primevr-preprod.constances.fr/_dataTools/css/with-materialadmin.css">
<link type="text/css" rel="stylesheet" href="https://primevr-preprod.constances.fr/_dataTools/css/primevr.css">
<script type="text/javascript" src="https://primevr-preprod.constances.fr/_assets/jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://primevr-preprod.constances.fr/_assets/bootstrap/js/bootstrap.min.js"></script>
<style> button {height:30px}</style></head>
<body>
<table class="table table-bordered table-stripped no-margin">
<thead>
<tr>
<th colspan="7">Questionnaire n° 2038_1 : <em class="text-default-light"><small>aucune pathologie confirmée</small></em></th>
</tr>
</thead>
<tbody>
<tr>
<td class="style-default" style="border-bottom: 1px solid white">
<button type="button" class="btn btn-success btn-xs modal-addDoc" title="Ajouter un document CRANAP" data-uidquest="2038_1" data-uidtypedoc="CA_CRANAP">
<i class="fa fa-arrow-circle-down"></i>
</button>
</td>
<td colspan="4" class="style-default" style="border-bottom: 1px solid white">
<strong>CR d'anatomopathologie (ponction, biopsie, myélogramme)</strong> <span>(CRANAP)</span></td>
<td colspan="2" class="style-default align-right" style="border-bottom: 1px solid white">
</td>
</tr>
<tr>
<td class="style-default" style="border-bottom: 1px solid white">
<button type="button" class="btn btn-success btn-xs modal-addDoc" title="Ajouter un document CRHOSP" data-uidquest="2038_1" data-uidtypedoc="CA_CRHOSP">
<i class="fa fa-arrow-circle-down"></i>
</button>
</td>
<td colspan="4" class="style-default" style="border-bottom: 1px solid white">
<strong>CR d'hospitalisation</strong> <span>(CRHOSP)</span></td>
<td colspan="2" class="style-default align-right" style="border-bottom: 1px solid white">
</td>
</tr>
<tr>
<td class="style-default" style="border-bottom: 1px solid white">
<button type="button" class="btn btn-success btn-xs modal-addDoc" title="Ajouter un document CROAPP" data-uidquest="2038_1" data-uidtypedoc="CA_CROAPP">
<i class="fa fa-arrow-circle-down"></i>
</button>
</td>
<td colspan="4" class="style-default" style="border-bottom: 1px solid white">
<strong>CR d'opération, analyse pathologique de la pièce opératoire</strong> <span>(CROAPP)</span></td>
<td colspan="2" class="style-default align-right" style="border-bottom: 1px solid white">
</td>
</tr>
<tr>
<td class="style-default" style="border-bottom: 1px solid white">
<button type="button" class="btn btn-success btn-xs modal-addDoc" title="Ajouter un document CRRCPL" data-uidquest="2038_1" data-uidtypedoc="CA_CRRCPL">
<i class="fa fa-arrow-circle-down"></i>
</button>
</td>
<td colspan="4" class="style-default" style="border-bottom: 1px solid white">
<strong>CR de réunion de concertation pluridisciplinaire (RCP)</strong> <span>(CRRCPL)</span></td>
<td colspan="2" class="style-default align-right" style="border-bottom: 1px solid white">
</td>
</tr>
<tr>
<td class="style-default" style="border-bottom: 1px solid white">
<button type="button" class="btn btn-success btn-xs modal-addDoc" title="Ajouter un document DOMATU" data-uidquest="2038_1" data-uidtypedoc="CA_DOMATU">
<i class="fa fa-arrow-circle-down"></i>
</button>
</td>
<td colspan="4" class="style-default" style="border-bottom: 1px solid white">
<strong>Dosages de marqueurs tumoraux (ex. PSA)</strong> <span>(DOMATU)</span></td>
<td colspan="2" class="style-default align-right" style="border-bottom: 1px solid white">
</td>
</tr>
<tr>
<th width="1%"></th>
<th>Date du document</th>
<th>Nom</th>
<th>Date d'ajout</th>
<th>Utilisateur</th>
<th>Description</th>
<th width="1%"></th>
</tr>
</tbody>
</table>
<div id="modal-addDoc" class="modal animated fadeInUp" data-easein="fadeInUp" data-easeout="fadeOutUp" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Charger un document <span id="uidTypeDoc"></span></h3>
</div>
<div class="modal-body">
<form id="form-addDoc" enctype="multipart/form-data" method="post">
<input name="uidEnq" value="2038" type="hidden">
<div class="row">
<div class="col-sm-6">
<label><strong>Choisir le document</strong>
<input required="" name="document" type="file">
</label>
</div>
<div class="col-sm-3 input-group date">
<div class="input-group-content">
<label><strong>Date du document</strong>
<input required="" class="form-control" name="dateDoc" placeholder="(J)J/(M)M/(AA)AA" type="text">
</label>
</div>
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
<div class="row margin-top margin-left">
<label style="width:90%"><strong>Description</strong>
<textarea name="descr" rows="5" class="col-sm-12"></textarea>
</label>
</div>
</form>
<progress id="progress" style="display:none;"></progress>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="addDoc">Enregistrer</button>
<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Annuler</button>
</div>
</div>
</div>
</div>
</body>【问题讨论】：
-
看起来您只是在隐藏模式，而不是删除它。
-
嘿@freginold thks 输入。你是什么意思“删除它”？我无法删除 html 元素，因为如果单击另一个下载按钮仍然需要它...？-|
-
如果您无法删除包含模态的 HTML 元素，也许您可以在添加新模态之前将其清除。现在的方式是隐藏第一个（取消) 模式，但功能仍然存在。
-
那么“清除”会是什么？我试图重置表单，但是由于没有使用表单，所以正如 sn-p 显示的那样，这不是表单的问题
-
完全披露，我为这个项目做出了贡献，但是：您可能会发现类似 Bootbox 的内容（特别是自定义对话框）很有用 - 每次显示对话框时（默认情况下）都会重新创建模态，因此您不会遇到过时数据的问题。