So i have a table in jsp and i'm trying to fire a function when clicking on the table lines in order to post the data. I have a JS file where i creted my function with ajax click event problem is the event is not firing
$(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 >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 onm ouseOver="this.className='over';" onm ouseOut="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" onm ouseover="voltar.src = '../images/fr/voltar_s.gif';" onm ouseout="voltar.src = '../images/fr/voltar.gif';"><img src="../images/fr/voltar.gif" border="0" name=voltar ></a>
</td>
</tr>
</table>
</body>
</html>PS: i already tried calling by classname it's not working And checked to browser params to see that it's actually not fired
CodePudding user response：
Notice the element(s) you're filtering on in your click handler:
$(document).on("click", '.outi', (function(MyObj){
The handler function will specifically execute for elements with the outi class. But your element doesn't have that class.
It does when the page first loads:
<tr onm ouseOver="this.className='over';" onm ouseOut="this.className='outi';">
But notice what the inline JavaScript on that element is doing. When the mouse hovers over the element, it changes the class.
The mouse is going to hover over the element before the user clicks the element.
You can target the class it actually has:
$(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 onm ouseOver="this.className='over';" onm ouseOut="this.className='outi';">
<td class=texte7 align=left colspan=5> Aucun client ne trouve</td>
</tr>
</table>Or perhaps use both classes instead of replacing one with the other:
$(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 onm ouseOver="this.classList.add('over');" onm ouseOut="this.classList.remove('over');">
<td class=texte7 align=left colspan=5> Aucun client ne trouve</td>
</tr>
</table>However you approach it, the main point is that when you're filtering on a specific class then the element needs to have that class to trigger the event handler.