提问人：karDEVproj 提问时间：10/19/2022 最后编辑：karDEVproj 更新时间：10/19/2022 访问量：59
Ajax 单击事件未在 Javascript 文件中触发
Ajax click event not firing In Javascript File
问：
所以我在jsp中有一个表，我试图在单击表行时触发一个函数以发布数据。 我有一个JS文件，我在其中使用ajax click事件创建了我的函数 问题是事件未触发
$(document).ready(function() {
$(document).on("click",'.outi',(function(MyObj)
{ var Myjson = JSON.stringify(MyObj);
$.ajax({
// Methode POST
method: "POST",
// URL
url: "Client_frameServlet",
// Mode asynchrone pour attendre la fin de l'ajax avant de continuer
async: false, // Mode synchrone
// Envoie des donnees
data: Myjson ,
//data: {user: document.princ_form.user.value, numero_carte: document.princ_form.password_old.value, password_n1: document.princ_form.password_n1.value},
dataType: "json" ,
success: function() {
alert('In Ajax');
}
})
}));
});<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<META HTTP-EQUIV="expires" CONTENT="0">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META http-equiv="Content-Type" content="text/html; charset="iso-8859-1">
<head>
<title>TX06</title>
<link rel='stylesheet' type='text/css' href='style.css'>
<script src="date.js"></SCRIPT>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
></script>
<script src="res_gen.js">
</script>
<body>
<table width="100%" align="center" border=0 cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="95%" align="center" border=0 cellspacing="0" cellpadding="0">
<tr>
<td class="titre">Résultat de la recherche</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table border=0 bgcolor=#92ADC2 cellspacing=1 cellpadding=3 width=95% align=center>
<tr class=entete>
<td class=texte8 align=center> Nom</td>
<td class=texte8 align=center> Date de naissance</td>
<td class=texte8 align=center> Coll</td>
<td class=texte8 align=center> Numéro</td>
<td class=texte8 align=center> Numéro contact</td>
<td class=texte8 align=center> TITULAIRE</td>
</tr>
<tr class="outi" onMouseOver="this.className='over';" onMouseOut="this.className='outi';">
<td class=texte7 align=left colspan=5> Aucun client ne trouve</td>
</tr>
</table>
<br>
<table width="95%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<a target="corps" href="gen_rech.jsp" class="rub2" onmouseover="voltar.src = '../images/fr/voltar_s.gif';" onmouseout="voltar.src = '../images/fr/voltar.gif';"><img src="../images/fr/voltar.gif" border="0" name=voltar ></a>
</td>
</tr>
</table>
</body>
</html>PS：我已经试过按类名调用它不起作用 并检查浏览器参数以查看它实际上没有触发
答：
0赞
David
10/19/2022
#1
请注意您在点击处理程序中筛选的元素：
$(document).on("click", '.outi', (function(MyObj){
处理程序函数将专门针对具有该类的元素执行。但是你的元素没有那个类。outi
当页面首次加载时，它会这样做：
<tr class="outi" onMouseOver="this.className='over';" onMouseOut="this.className='outi';">
但请注意该元素上的内联 JavaScript 在做什么。当鼠标悬停在元素上时，它会更改类。
在用户单击元素之前，鼠标将悬停在元素上。
您可以定位它实际具有的类：
$(document).ready(function() {
$(document).on("click", '.over', (function(MyObj){
console.log('test');
}));
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<table border=0 bgcolor=#92ADC2 cellspacing=1 cellpadding=3 width=95% align=center>
<tr class=entete>
<td class=texte8 align=center> Nom</td>
<td class=texte8 align=center> Date de naissance</td>
<td class=texte8 align=center> Collaborateur</td>
<td class=texte8 align=center> Numéro de la carte</td>
<td class=texte8 align=center> Numéro de contrat</td>
<td class=texte8 align=center> TITULAIRE</td>
</tr>
<tr class="outi" onMouseOver="this.className='over';" onMouseOut="this.className='outi';">
<td class=texte7 align=left colspan=5> Aucun client ne trouve</td>
</tr>
</table>或者，也许同时使用这两个类，而不是将一个类替换为另一个类：
$(document).ready(function() {
$(document).on("click", '.outi', (function(MyObj){
console.log('test');
}));
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<table border=0 bgcolor=#92ADC2 cellspacing=1 cellpadding=3 width=95% align=center>
<tr class=entete>
<td class=texte8 align=center> Nom</td>
<td class=texte8 align=center> Date de naissance</td>
<td class=texte8 align=center> Collaborateur</td>
<td class=texte8 align=center> Numéro de la carte</td>
<td class=texte8 align=center> Numéro de contrat</td>
<td class=texte8 align=center> TITULAIRE</td>
</tr>
<tr class="outi" onMouseOver="this.classList.add('over');" onMouseOut="this.classList.remove('over');">
<td class=texte7 align=left colspan=5> Aucun client ne trouve</td>
</tr>
</table>无论您采用何种方法，主要的一点是，当您筛选特定类时，元素需要具有该类才能触发事件处理程序。
评论