我如何获得 e.target？

Question

我正在尝试获取employeeID 的目标但是我有点困惑，因为我不确定为什么 .closest("form").find(".findID") 没有获得 id 如果是HTML 中的 id 所在的位置。

谁能解释一下获取 e.target 的正确方法是什么？

目标应该是这行中的第一个跨度标签， - id: "id"

基本上，当点击 html 上的 Delete 按钮时，会出现以下消息：Remove this employee?，点击确认时会显示ID 并删除具有特定 ID 号的联系人。然后会出现一条消息：Employee removed。

function toggleConfirm(message, func) {

  if (!e) var e = window.event;
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();


employeeID = $(e.target).closest("form").find(".findID").text()

  if ($('#confirm').css('display') == "none") {

    $('#confirm').show()
    $('#confirmQuestion').show()
    $('#confirmResponse').hide()

    let addOrRemove = capitalizeFirstLetter(message.split(" ")[0])
    addOrRemove == "Add" ? addOrRemove += "ed" : addOrRemove += "d"

    $('#confirmMessage').text(message)
    $('#confirmButton').attr('onClick', `

            ${func.toString()};

            $('#confirmQuestion').hide()
            $('#confirmResponse').show()

            $('#confirmResponseMessage').text('${addOrRemove}')

            setTimeout(() => {
                $('#confirm').hide();
                $('#profilePage').hide();

            }, 1500)

            
        `)

  } else {

    $('#confirm').css('display', 'none')

  }

}

function deleteEmployee() {

  $.ajax({

    data: {
      'id': employeeID
    },
    url: 'php/deleteEmployeeByID.php',
    dataType: 'json',

    success: function(data) {

      $('#database').html(`

            <h4>
                <span class="hideCell"></span>
                <p class="findID"></p>
                <br>
                
                
                <div class="hideCell">
                    <p class="hideCell" id="departmentHeader"></p>
                    <p class="hideCell" id="locationHeader"></p>

                    <span class="hideCell"</span>
                    <span class="hideCell"</span>
                    
                </div>
            </h4>


        `)


      $.ajax({

        type: 'GET',
        url: 'php/getAll.php',
        dataType: 'json',

        success: function(data) {

          var db = data.data;

          for (let i in db) {

            $('#database').append(`
                    
                            
                            <div class="loadProfile col-sm-6 col-md-4" onclick="loadProfile(${JSON.stringify(db[i]).split('"').join("&quot;")})">
                            <div class="widget col-3 profile">
                                <div class="widget-simple">
            
                                    <span>
                                    <img src="img/user-regulars.svg" alt="avatar" class="widget-image img-circle pull-left animation-fadeIn">
                                    </span>
                                        <h4 class="widget-content text-left">
                                            <span id="fullName">${db[i].lastName}, ${db[i].firstName}</span>
                                            <p class="findID" style="font-size:11px; color: rgb(190, 190, 190); display: inline"> - ID: ${db[i].id}</p>
                                            <br>
                                            
                                            
                                            <div class="info" style: "overflow: hidden">
                                                <p class=${filterBy == "department"} style="font-size:11px; color: rgb(190, 190, 190); float: left">${db[i].department}</p>
                                                <p class=${filterBy == "location"} style="font-size:11px; color: rgb(190, 190, 190); float: left">, ${db[i].location}</p>
        
                                                <a href="" class="btn btn-xs btn-primary2 Phone" data-toggle="tooltip" title="" data-original-title="Phone"><i class="fa fa-phone"></i></a>
                                                <a href="mailto:${db[i].email}" rel="prefetch" id="eM" class="btn btn-xs btn-primary Email" data-toggle="tooltip" title="" data-original-title="Email"><i class="fas fa-envelope"></i></a>
                                                
                                            </div>
                                        
                                        </h4>
            
                                </div>
                            </div>
                        
                            </div>
                    
                            `)

          }


        }

      })


    }



  })
}

<div class="modal" id="profilePage">



  <div class="row ng-scope profile" id="profile">

    <div class="text-right">

      <button class="button buttonClose" onclick="returnToTable()"><i class="fa fa-times-circle fa-xs"></i></button>

    </div>
    <div class="col-md-4">

      <div class="panel panel-default">

        <div class="panel-body text-center profileTitle" id="displayName">
          <img class="center-block img-responsive img-circle img-thumbnail thumb96 animation-fadeIn" src="img/user-regulars.svg" alt="User">
          <h3 class="m0 text-bold"></h3>
        </div>
      </div>
      <div class="panel panel-default hidden-xs hidden-sm users">
        <div class="panel-heading">
          <div class="panel-title text-center">Employees</div>
        </div>
        <div class="panel-body2">

          <div id="databaseUsers"></div>

        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="panel panel-default">

        <div class="panel-body">


          <div class="panel-title text-center">Employee Information</div>
          <br>


          <div class="row pv-lg information" id="information">
            <div class="col-lg-12">

              <form class="form-horizontal ng-pristine ng-valid userInfo" id="userInfo">
                <div class="row profileRow">
                  <label class="col-sm-4">ID:</label>
                  <span class="col-sm-4 findID" style="color: black" id="id"></span>
                </div>

                <div class="row profileRow">
                  <label class="col-sm-4" for="firstName">First Name:</label>
                  <span class="col-sm-4" style="color: black" id="firstName"></span>
                </div>

                <div class="row profileRow">
                  <label class="col-sm-4" for="lastName">Last Name:</label>
                  <span class="col-sm-4" style="color: black" id="lastName"></span>
                </div>

                <div class="row profileRow">
                  <label class="col-sm-4" for="email">Email:</label>
                  <a href="mailto:" class="col-sm-4" style="color: black" id="email"></a>

                </div>

                <div class="row profileRow">
                  <label class="col-sm-4" for="department">Department:</label>
                  <span class="col-sm-4" style="color: black" id="department"></span>

                </div>

                <div class="row profileRow">
                  <label class="col-sm-4" for="location">Location:</label>
                  <span class="col-sm-4" style="color: black" id="location"></span>

                </div>

              </form>

              <br>
              <div class="buttons">

                <div class="btn btn-xs btn-primary3" id="editButton" style="display: inline" onclick="editProfile()"><i class="fa fa-pencil fa-xs" aria-hidden="true" view="" type="button" data-toggle="modal"></i> </div>

                <div class="btn deleteEmployee" id="deleteEmployee" style="display: inline" onclick="toggleConfirm('Remove this employee?', 'deleteEmployee()')">DELETE BUTTON<i class="fas fa-minus-circle fa-xs" aria-hidden="true" view="" type="button" data-toggle="modal"></i></div>

              </div>


            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>

Answer 1

@mireia-farre 你搞错的概念是 jQuery 的 closest() 方法只向上遍历 DOM 树中的祖先。
然而<form> 标签并不是<div class="btn deleteEmployee" ...>DELETE BUTTON</div> 的祖先。

要获得employeeID，试试这个：

employeeID = $(event.target).closest(".buttons").siblings("form").find(".findID").text();

演示： https://jsfiddle.net/theAccountant/0cLy4vdo/18/

了解更多：

closest()

siblings()