Get click array item

Question

trying to call an array from model.data in catListView.render(), it's showing perfectly but how to make the array item clickable, (i.e cat0 is clicked or cat2 is 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();
}());

try li.addEventListener('click', function(){ console.log(this.li.text()); }); — Dinesh undefined
– Dinesh undefined, Commented May 23, 2017 at 7:03
already tried this, getting this error "Uncaught TypeError: li.addEventListener is not a function" — faisaljanjua
– faisaljanjua, Commented May 23, 2017 at 7:06
var li = "<li onClick='somefunction(this)'>" + cat + "</li>"; — Dinesh undefined
– Dinesh undefined, Commented May 23, 2017 at 7:10

Severin · Accepted Answer · 2017-05-23 07:12:29Z

1

You should bind an eventListener to the EventTarget using EventTarget.addEventListener() when using pure DOM (see https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener for reference).

So in your code it would be:

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

li.innerText = cat;

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

Note that you also need to create a DOM element to bind events to.

edited May 23, 2017 at 7:12

answered May 23, 2017 at 7:06

Severin

3081 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

faisaljanjua Over a year ago

logically it should be done as per your solution, and already tried this but getting this error getting this error "Uncaught TypeError: li.addEventListener is not a function"

Severin Over a year ago

Edit; was too fast. You can't bind to strings, but should bind to DOM elements. Hence just create an element. You can insert the li into the DOM using the jQuery append or the pure DOM methods then.

faisaljanjua Over a year ago

yes, I find the solution in pure JS, but I am trying to do this in JQuery. and damm, its give me headache, might I missing very small thing, array value is fetch and display it in li and its working fine, but how to exactly bind each item with its own making me pain

Severin Over a year ago

To create the element using jquery just do a var li = $("<li>" + cat + "</li>"); li.click(function () { /* do whatever here */ }); catList.append(li); - this should create the element as well, .click binds a click listener to it.

faisaljanjua Over a year ago

when bind through on or click its give me TypeError "Uncaught TypeError: li.on is not a function"

|

LinJI · Accepted Answer · 2017-05-23 07:18:45Z

0

The codes you typed cannot run... I try to guess what you want-

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

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

answered May 23, 2017 at 7:18

LinJI

1265 bronze badges

2 Comments

faisaljanjua Over a year ago

Uncaught TypeError: li.bind is not a function :(

LinJI Over a year ago

There are some differences between DOM and Jquery Object... You can create a Jquery Object like the below code. var li = $("<li>" + cat + "</li>");

Collectives™ on Stack Overflow

Get click array item

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related