jQuery最近屬性返回未定義

Question

我一直在看其他一些示例，但是不幸的是它們並不完全相同。 我正在嘗試刪除一些onclick數據（此處省略了該部分，只需要該ID）。 問題是它為我想要的ID返回未定義。

 function deleteMessage(){
    var $currentId = $(this).closest(".ulrecords").attr('id');
    alert("ID: " + $currentId)
 }

該方法被稱為如下

<a href="javascript:deleteMessage();" id="amessage">

HTML看起來像這樣

<ul class="chat-messages">
  <ul id="msg_1234567890_a1bs2e" class="ulrecords">
   <li>
     John
     <span>27 minutes ago</span>
      <a href="javascript:deleteMessage();" id="amessage"> X</a>
    </li>
    <li id="limessage">
       Some message here
    </li>
  </ul>
  <ul id="msg_9234742878_73bhad" class="ulrecords">
   <li>
     John
     <span>28 minutes ago</span>
      <a href="javascript:deleteMessage();" id="amessage"> X</a>
    </li>
    <li id="limessage">
       Some other message here
    </li>
  </ul>
</ul>

因此，當我在ul之一中單擊時，我希望獲得希望，任何人都可以將我指向正確的方向

Answer 1

因為this是您的情況下的窗口。

要么傳遞對您單擊的元素的引用

<a href="javascript:deleteMessage(this);" id="amessage">

和

function deleteMessage(elem){
    var $currentId = $(elem).closest(".ulrecords").attr('id');
    alert("ID: " + $currentId)
}

或更妙的是，將事件附加到eventListeners中。

$(document).on("click", ".ulrecords", function () {
    alert(this.id);
});

要么

$(document).on("click", ".ulrecords a", function () {
    var $currentId = $(this).closest(".ulrecords").attr('id');
});

ID也是單數。

Answer 2

您正在通過href鏈接調用該方法，該鏈接未將方法的執行上下文設置為單擊的元素。 為了獲取正確的元素，請勿通過href調用該方法，而應在其上附加點擊處理程序。 現在，您的錨點具有重復的ID，這是您需要解決的完全不同的問題。

我在示例中為所有錨添加了一個類，以使用jQuery輕松選擇它們。

<a href="javascript:deleteMessage();" class="my-button">X</a>

和JavaScript：

$(function () {
    $(document).on("click", ".my-button", function () {
        var $currentId = $(this).closest(".ulrecords").attr('id');
        alert("ID: " + $currentId);
    });
});

Answer 3

 $(document).ready(function() { $('.delmsg').click(function() { alert($(this).parent().parent('ul').attr('id')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="chat-messages"> <ul id="msg_1234567890_a1bs2e" class="ulrecords"> <li>John <span>27 minutes ago</span> <a href="javascript:deleteMessage();" class="delmsg">X</a></li> <li id="limessage">Some message here</li> </ul> <ul id="msg_9234742878_73bhad" class="ulrecords"> <li>John <span>28 minutes ago</span> <a href="javascript:deleteMessage();" class="delmsg">X</a></li> <li id="limessage">Some other message here</li> </ul> </ul> 

Answer 4

 $(function(){ $('.remove').on('click', function(){ var currentId = $(this).closest(".ulrecords").attr('id'); console.log(currentId); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="msg_1234567890_a1bs2e" class="ulrecords"> <li> John <span>27 minutes ago</span> <a href="javascript:void(0);" class="remove"> X</a> </li> <li id="limessage"> Some message here </li> </ul> <ul id="msg_9234742878_73bhad" class="ulrecords"> <li> John <span>28 minutes ago</span> <a href="javascript:void(0);" class="remove"> X</a> </li> <li id="limessage"> Some other message here </li> </ul>