Get click array item

Question

versuchen, ein Array von model.data in catListView.render() aufzurufen, es zeigt perfekt, aber wie das Array-Element anklickbar, (d. H. Cat0 ist angeklickt oder cat2 ist click).

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

Sie sollten eine eventlistener zum Eventtarget mit EventTarget.addEventListener() binden, wenn reinem DOM (https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener als Referenz sehen).

in Ihrem Code So wäre es:

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

li.innerText = cat; 

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

Beachten Sie, dass Sie auch ein DOM-Element erstellen müssen Ereignisse zu binden.

Answer 2

Die Codes eingegeben Sie können nicht laufen ... Ich versuche zu erraten, was Sie wollen-

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

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