Impossible to bind an event to an array containing jquery objects

Question

I create dynamically a list content:

for (var i = 0; i<length; i++) {
    var $li = $('<li />', {
          text: ....
    }).appendTo($list);

    myArray.push($li);

    // This doesn't work
    $(myArray).click(function (e) { alert('cc'); });

But when I get the parent of the created elements it works

// This works
$('ul.liste').first().find('li').click(function (e) {alert('cc'); });

What's the difference between between $(myArray) and $('ul.liste').first().find('li')?
How to correctly convert a js array to a jquery collection? I thought wrapping the array with $() would work but obviously not.

Denys Séguret · Accepted Answer · 2016-12-26 12:35:00Z

2

Instead of pushing, you can use add:

var $set = $();
for (var i = 0; i<length; i++) {
    var $li = $('<li />', {
          text: ....
    }).appendTo($list);
    $set = $set.add($li);
}
$set.click(...

If you prefer to build a native array and then convert it to a jQuery collection, then you can do

var $set = $.add.apply($(), myArray);

answered Dec 26, 2016 at 12:35

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

Comments

Satpal · Accepted Answer · 2016-12-26 12:36:00Z

2

myArray is native array, You need jQuery object to bind event handler which $('ul.liste').first().find('li') returns thus it works.

You can use .add() to create collection of jQuery object then use it to bind event handler.

//Create empty jQuery object
var myArray = $([]);
var $list = $('.list')
for (var i = 0; i < 5; i++) {
  var $li = $('<li />', {
    text: i
  }).appendTo($list);

  myArray = myArray.add($li);
}
// This doesn't work
myArray.click(function(e) {
  console.log(this.textContent);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='list'>
</ul>

answered Dec 26, 2016 at 12:36

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

ScanQR · Accepted Answer · 2016-12-26 12:32:20Z

1

You need to loop over the array instead,

Following is incorrect as it is not binding a click event on corresponding element.

 $(myArray).click(function (e) { alert('cc'); });

Instead loop as,

 $(myArray).each(function(){
     $(this).click(function (e) { alert('cc'); });
 });

answered Dec 26, 2016 at 12:32

ScanQR

3,8202 gold badges16 silver badges34 bronze badges

Comments

Nitesh · Accepted Answer · 2016-12-26 12:38:47Z

1) What's the difference between between $(myArray) and $('ul.liste').first().find('li')?

Here, myArray is not any jQuery object but a normal array containing jQuery objects as its element. You never bind event to array or string or any other datatype. you always bind event to jQuery object (that contains some DOM elements). Therefore, instead of binding myArray, you should bind every element of myArray one by one. When you use $('ul.liste'), it works fine because it is a jQuery object with some DOM element in it.

2) How to correctly convert a js array to a jquery collection? I thought wrapping the array with $() would work but obviously not.

You don't convert js Array to jQuery object. But you convert any DOM element to jQuery object as: For eg,

var elem = document.getElementById("myElem"); // a DOM element
$(elem) //a jQuery object

Arrays are there just to save some data not for DOM manipulations.

Collectives™ on Stack Overflow

Impossible to bind an event to an array containing jquery objects

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related