我正在尝试添加div中按钮的事件。
HTML:
<template id="modele-panier" type="text/AhuntsicModele">
<div class="dialog-item">
<table>
<tr>
<td>
<img src={cheminImage} alt="">
</td>
<td>
<h2>Article : {libelleProduit}</h2>
<p>Qte : {qteProduit} prix : {prixProduit}$</p>
</td>
<div class="supp">
<td>
<a href="#" id="{libelleProduit}">Supprimer </a>
</td>
</div>
</tr>
</table>
</div>
</template>
Controler.js
document.addEventListener('click', function (e) {
if (e.target && e.target.matches('button')) {
controleur.ajouterPanier(e.target.id);
} else if (e.target && e.target.matches('#main')) {
controleur.loadCatalogue();
} else if (e.target && e.target.matches('#getBMW')) {
controleur.loadBMW();
} else if (e.target && e.target.matches('#getAudi')) {
controleur.loadAudi();
} else if (e.target && e.target.matches('#getMercedes')) {
controleur.loadMercedes();
} else if (e.target && e.target.matches('#icone_compte')) {
controleur.creationCompte();
} // THIS EVENT RIGHT HERE :
else if (event.target.matches('supp')) {
alert(e.target.id)
controleur.supprimerItem();
}
});
我无法将事件添加到div类,但其他所有方法都工作正常,因为我未将div类用于其他事件。谢谢
您可以使用此
const div = document.getElementsByClassName("supp");
else if (div[0]!=undefined) {
alert(e.target.id)
controleur.supprimerItem();
}
您是否在尝试匹配类时尝试匹配.supp
(并且.
是类选择器?]
[如果我的理解正确,您希望控制器逻辑检测和处理具有supp
类的元素上的单击事件。
您正在尝试使用函数参数document.addEventListener('click', function(e) {
/* Existing code removed for bervity */
/* Query document during click for first .supp relative to table */
const suppDiv = document.querySelector("table .supp")
if(suppDiv) {
alert('clicked .supp')
}
});
,该参数未在函数中调用。您已在函数中命名参数<table>
<tr>
<td><img src="https://via.placeholder.com/150" alt=""></td>
<td>
<h2>Article : {libelleProduit}</h2>
<p>Qte : {qteProduit} prix : {prixProduit}$</p>
</td>
<div class="supp">
<td><a href="#" id="foo">Supprimer </a></td>
</div>
</tr>
</table>
。