以下代码显示了一个文档类型列表，每个文档类型都有一个按钮，允许上传文档并将文档类型用作变量（针对不同的目的）。
每个按钮上的modal-addDoc类触发打开带有表单的模式，以便收集需要随文件一起记录的信息。
当点击某个doc类型的按钮然后取消模态（用户打开了错误类型的doc），然后点击另一个按钮，之后＆＃34; enregistrer＆＃34;单击模态中的按钮，将触发已取消类型和最新类型的操作。出于演示目的，在以下代码段中，操作只是一个警报。
示例：的
您将收到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>
答案 0 :(得分：0)
当发生这种情况时，您获得多个alert操作的原因是因为未删除先前所选选项中的单击处理程序。因此，每次选择一个选项时，都会添加一个新的点击处理程序，但旧的点击处理程序不会被删除：
$("#"+addDocId).click(function() {
alert(addDocId)
})
您需要做的就是在添加点击处理程序之前插入.off()语句，以删除任何先前的处理程序/侦听器。请参阅此示例，该示例仅显示当前所选选项的alert：
$('.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).off(); // remove any previously-added listeners
$("#"+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>