配列アイテム

Question

catListView.render（）のmodel.dataから配列を呼び出そうとしていますが、完全に表示されていますが、配列項目をクリック可能にする方法（cat0をクリックするかcat2をクリック）です。

$(function() { 
var model = { 
    data: ["cat0", "cat1", "cat2", "cat3"], 
} 

var oct = { 
    init: function() { 
     catList.init(); 
    }, 
    getCat: function() { 
     return model.data; 
    }, 
}; 

var catListView = { 
    init: function() { 
     this.$catList = $("#cat-list"); 
     catList.render(); 
    }, 
    render: function() { 
     var catList = this.$catList.html(''); 

     var cats = oct.getCat(); 

     for (var i = 0; i < cats.length; i++) { 
      var cat = cats[i]; 

      var li = "<li>" + cat + "</li>"; 
      addEventListener(li, "click", function(){      
       console.log(this.li.text()); 
      }); 
      catList.append(li); 
     } 
    } 
}; 

oct.init(); 
}()); 

Answer 1

あなたは純粋なDOMを使用した場合（）（参照のためhttps://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListenerを参照）EventTarget.addEventListenerを使用してのEventTargetへのEventListenerをバインドする必要があります。

だからあなたのコード内では次のようになります。あなたもにイベントをバインドするDOM要素を作成する必要が

var li = document.createElement('li'); // create an element instead if string 

li.innerText = cat; 

li.addEventListener("click", function(){      
    console.log(li.innerText); 
}); 

注意。

Answer 2

入力したコードが実行することはできません...私はあなたが

$li.bind("click", function() { 
    console.log("way 2", $(this).index()); 
}); 

https://codepen.io/linjiyeah/pen/QvzVQN