Ajax單擊事件未在Javascript檔案中觸發-有解無憂

所以我在jsp中有一個表格，我試圖在單擊表格行以發布資料時觸發一個函式。我有一個 JS 檔案，我用 ajax 點擊事件創建了我的函式問題是事件沒有觸發

    $(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>&nbsp;Nom</td>
            <td class=texte8 align=center>&nbsp;Date de naissance</td>
            <td class=texte8 align=center>&nbsp;Coll</td>
            <td class=texte8 align=center>&nbsp;Numéro</td>
            <td class=texte8 align=center>&nbsp;Numéro contact</td>     
            <td class=texte8 align=center>&nbsp;TITULAIRE</td>
        </tr>
        
                <tr class="outi" onMouseOver="this.className='over';" onMouseOut="this.className='outi';">
                    <td class=texte7 align=left colspan=5>&nbsp;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：我已經嘗試通過類名呼叫它不起作用并檢查瀏覽器引數以查看它實際上沒有被觸發

uj5u.com熱心網友回復：

請注意您在點擊處理程式中過濾的元素：

$(document).on("click", '.outi', (function(MyObj){

處理函式將專門針對具有outi該類的元素執行。但是你的元素沒有那個類。

它在頁面首次加載時執行：

<tr class="outi" onm ouseOver="this.className='over';" onm ouseOut="this.className='outi';">

但請注意該元素上的行內 JavaScript 正在做什么。當滑鼠懸停在元素上時，它會更改 class。

在用戶單擊元素之前，滑鼠將懸停在元素上。

您可以定位它實際擁有的類：

$(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>&nbsp;Nom</td>
    <td class=texte8 align=center>&nbsp;Date de naissance</td>
    <td class=texte8 align=center>&nbsp;Collaborateur</td>
    <td class=texte8 align=center>&nbsp;Numéro de la carte</td>
    <td class=texte8 align=center>&nbsp;Numéro de contrat</td>      
    <td class=texte8 align=center>&nbsp;TITULAIRE</td>
  </tr>
  <tr class="outi" onMouseOver="this.className='over';" onMouseOut="this.className='outi';">
    <td class=texte7 align=left colspan=5>&nbsp;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>&nbsp;Nom</td>
    <td class=texte8 align=center>&nbsp;Date de naissance</td>
    <td class=texte8 align=center>&nbsp;Collaborateur</td>
    <td class=texte8 align=center>&nbsp;Numéro de la carte</td>
    <td class=texte8 align=center>&nbsp;Numéro de contrat</td>      
    <td class=texte8 align=center>&nbsp;TITULAIRE</td>
  </tr>
  <tr class="outi" onMouseOver="this.classList.add('over');" onMouseOut="this.classList.remove('over');">
    <td class=texte7 align=left colspan=5>&nbsp;Aucun client ne trouve</td>
  </tr>
</table>

無論您采用哪種方法，主要的一點是，當您在特定類上進行過濾時，元素需要具有該類才能觸發事件處理程式。

uj5u.com熱心網友回復：

非常感謝！我沒有注意到類名的變化！現在 ajax 事件正在觸發！

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/518105.html

標籤：javascript爪哇阿贾克斯jsp点击监听器

上一篇：洗掉numpy陣列中的連續重復項

下一篇：LaravelPUT請求