CODEWITHSUNDEEP
javascriptjquery
smarber
smarber

Reputation: 5084

Impossible to bind an event to an array containing jquery objects

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'); });
  1. What's the difference between between $(myArray) and $('ul.liste').first().find('li')?
  2. How to correctly convert a js array to a jquery collection? I thought wrapping the array with $() would work but obviously not.

Upvotes: 1

Views: 81

Answers (4)

Nitesh
Nitesh

Reputation: 1550

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.

Upvotes: 1

Satpal
Satpal

Reputation: 133433

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>

Upvotes: 2

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382334

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);

Upvotes: 2

ScanQR
ScanQR

Reputation: 3820

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'); });
 });

Upvotes: 1

Related Questions