無法綁定按鈕上的點擊事件與jquery

Question

我是一個js新手。

我有這樣的結構：

<ul class='selectable-list'> 
<li><a data-id="5" data-type="Content">Test</a></li> 
<li><a data-id="3" data-type="Content">Test</a></li> 
</ul> 

我添加連接事件

$selectableList = $('.selectable-list a'); 
$selectableList.click(function(){ 
    console.log(this) 
    script.addItem(this); 
}); 

結果是this是文本，所以我不能獲取數據的屬性......爲什麼？

編輯：

 bindEvents : function bindEvents() { 
      $selectableList.click(function(){ 
       console.log(this.attr("data-type")) 
       script.addItem(this); 
      }); 
     } 

Uncaught TypeError: this.attr is not a function 

Answer 1

我不知道，你所談論的文本的來源。 this將是您單擊的DOM節點。如果您將其包裝在$()中，則應該能夠讀取數據屬性。

$selectableList = $('.selectable-list a'); 
 
$selectableList.click(function(){ 
 
    
 
    var anchor = $(this); 
 
    console.log(anchor.data("id"), anchor.data("type")); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class='selectable-list'> 
 
<li><a data-id="5" data-type="Content">Test</a></li> 
 
<li><a data-id="3" data-type="Content">Test</a></li> 
 
</ul>

Answer 2

.attr是jQuery的這意味着你只能把它應用到jQuery的對象提供的功能。

在這裏的代碼段中，您正嘗試使用這個，它屬於原生JavaScript，並且它沒有與它關聯的.attr方法。這這個對象將是您單擊的DOM節點對象。

你需要做它來包裝你這個$或jQuery的命名空間周圍像

$(this).attr("data-type") 

，你應該是好去

希望這是一些幫助。

快樂學習:)