無法使用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

.attr是jQuery提供的功能，這意味着您只能將其應用於jQuery對象。

下面的代碼片段，你要使用它在這個屬於本地JavaScript並沒有與它相關聯.attr方法。 這此對象將是您點擊的DOM節點對象。

將它包裝在$或jQuery命名空間周圍需要做些什么

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

而且你應該很好走

希望這會有所幫助。

快樂學習：）

Answer 2

我不確定您所談論的文本來自何處。 this將是您單擊的DOM節點。 如果將其包裝在$() ，則應該能夠讀取data屬性。

 $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>