jQuery 中帶有動態元素的觸發事件

Question

function getAnnoDetailsForTeacher(){
    
    var tcounter = 1;
    
    $.ajax({
        url:'<%=contextPath%>/show/announcementsForTeacher',
        headers: {
            'Authorization':'${sessionScope.token}'
        },
        type:'GET',
        data: {
            'loginId' : '${loginId}'
        },
        success:function(data){
            
            $('#annoTable tbody').empty();
            for(var i=0; i<data.length;i++)
            {
             var aid = data[i].id;
             var date = data[i].date;
             var subject = data[i].subject;
             var details = data[i].details;
             var status = data[i].status;
             $('#annoTable tbody').append('<tr data-toggle="modal" data-target="#viewTAnnoModal"><td id="tCounter'+aid+'"><strong>'+tcounter+
                                          '</strong></td><td id="tDate'+aid+'"><strong>'+date+
                                          '</strong></td><td id="tSubject'+aid+'"><strong>'+ subject +
                                          '</strong></td><td id="tDetails'+aid+'" class="cell expand-small-on-hover"><strong>'+ details +
                                          '</strong></td><td><button type="button" id="tAnnoBtn'+aid+'" onclick="viewTAnno()" class="viewbtn" data-toggle="modal" data-target="#" style="display:block;">View</button>'+
                                          '</td>'+
                                         ......+
                                          '</tr>');
             tcounter += 1;
            }
            $('#tnoti').empty();
            $('#tnoti').css('display','block');
            $('#tnoti').append(tcounter-1);
        },
        error:function(e){
            console.log(e)
        }
    });
    return tcounter;
    
}

我的目標是在 jQuery 內單擊視圖 btn（其中 id 為動態：id="tAnnoBtn'+aid+'"）時取消加粗一行。

這是粗體 jQuery

$('#tAnnoForm').on('click', '.viewbtn', function() {
    const fooTCounter = document.getElementById("tCounter");
      fooTCounter.innerHTML = fooTCounter
        .innerHTML
        .replace(/<strong>/g, "")
        .replace(/<\/strong>/g, "");


      const fooTDate = document.getElementById("tDate");
      fooTDate.innerHTML = fooTDate
        .innerHTML
        .replace(/<strong>/g, "")
        .replace(/<\/strong>/g, "");
    


      const fooTSubject = document.getElementById("tSubject");
      fooTSubject.innerHTML = fooTSubject
        .innerHTML
        .replace(/<strong>/g, "")
        .replace(/<\/strong>/g, "");
    


      const fooTDetails = document.getElementById("tDetails");
      fooTDetails.innerHTML = fooTDetails
        .innerHTML
        .replace(/<strong>/g, "")
        .replace(/<\/strong>/g, "");
    });

問題是每個元素都是使用動態 id（td 單元格和按鈕）動態創建的，所以我如何在不加粗的 jQuery 中輸入動態 id？ 就像在 jQuery 中一樣，它應該像 document.getElementById("tCounter1") 一樣 go，其中 1 與 tCounter 連接。 同樣在'.viewbtn'中，它應該像'#tAnnoBtn1'一樣go，其中1與tAnnoBtn動態連接。

檢查此視圖TAnno(aid) function

function viewTAnno(aid)
{
    var viewed;
    
    $.ajax({
        url:'<%=contextPath%>/show/annoViewedForTeacher',
        headers: {
            'Authorization':'${sessionScope.token}'
        },
        type:'GET',
        data: {
            'loginId' : '${loginId}',
            'anno_id' : aid
        },
        success:function(data){
            //alert("New Announcement Added Successsfully");
            
            console.log(data);
            viewed =data;
            $('#tAnnoTable').on('click', '.viewbtn', function() {
                if(viewed==0){
                  //get closest tr > loop through tds
                  $(this).closest("tr").find("td:not(:last)").each(function() {
                    //replace text
                    $(this).text($(this).text().replace(/<strong>/g, "")
                      .replace(/<\/strong>/g, ""))
                      //tcounter=tcounter-1;
                      $.ajax({
                        url:'<%=contextPath%>/show/annoViewedForTeacher',
                        headers: {
                            'Authorization':'${sessionScope.token}'
                        },
                        type:'POST',
                        data: {
                            'loginId' : '${loginId}',
                            'anno_id' : aid
                        },
                        success:function(data){
                            console.log(data);
                            
                            
                        },
                        error:function(e){
                            console.log(e)
                        }
                    });
                    
                    
                  })
                }
            })
                
        
            
            
            
        },
        error:function(e){
            console.log(e)
        }
    });
    
    return viewed;
    
}

我想在單擊視圖時取消加粗特定行，以便它在 db 中也發生變化，就像 gmail 收件箱一樣。 我怎樣才能做到這一點？

Answer 1

您可以簡單地遍歷單擊view按鈕的tds ，然后使用$(this).text(..)將<strong>標記替換為''

演示代碼：

 $('#annoTable').on('click', '.viewbtn', function() { //get closest tr > loop through tds $(this).closest("tr").find("td:not(:last)").each(function() { //replace text $(this).text($(this).text().replace(/<strong>/g, "").replace(/<\/strong>/g, "")) }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="annoTable"> <tbody> <tr data-toggle="modal" data-target="#viewTAnnoModal"> <td id="tCounter1"><strong>1</strong></td> <td id="tDate1"><strong>0.005997001499250375</strong></td> <td id="tSubject1"><strong>Abc</strong></td> <td id="tDetails1" class="cell expand-small-on-hover"><strong>Somwthing..</strong></td> <td><button type="button" id="tAnnoBtn1" onclick="viewTAnno()" class="viewbtn" data-toggle="modal" data-target="#" style="display:block;">View</button></td> </tr> <tr data-toggle="modal" data-target="#viewTAnnoModal"> <td id="tCounter2"><strong>2</strong></td> <td id="tDate2"><strong>0.005997001499250375</strong></td> <td id="tSubject2"><strong>Abc</strong></td> <td id="tDetails2" class="cell expand-small-on-hover"><strong>Somwthing..</strong></td> <td><button type="button" id="tAnnoBtn2" onclick="viewTAnno()" class="viewbtn" data-toggle="modal" data-target="#" style="display:block;">View</button></td> </tr> </tbody> </table>