jquery add an event handler to objects in an array

Question

Based on this I am trying to add the click event handler to an array of objects by writing this:

function addEventHandler(array, type, func) {
      var len = array.length;
      for (var i = 0; i < len; i++) {
         array[i].bind(type, func);
      }
   }

sections = $('#sponsorship > div .section')

addEventHandler(sections, 'click', function() {
      console.log(this);
});

However, I am getting the error message:

array[i].bind is not a function

Can I only use actual selectors on a bind method? Any suggestions?

have a look at each() - instead of your loop

Manse
– Manse

2011-11-25 18:59:03 +00:00
Commented Nov 25, 2011 at 18:59 — Manse
– Manse, Commented Nov 25, 2011 at 18:59

aziz punjani · Accepted Answer · 2011-11-25 18:57:08Z

5

You may need to convert your element into a jQuery object.

$(array[i]).bind

answered Nov 25, 2011 at 18:57

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

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

1 Comment

Jasper Over a year ago

This solution is a bit strange as it takes a jQuery object, turns it into a regular JS object, and then converts it back to a jQuery object. Check-out Royi Namir's solution.

Royi Namir · Accepted Answer · 2011-11-25 18:56:00Z

3

try this

function addEventHandler(array, type, func) {
      var len = array.length;
      for (var i = 0; i < len; i++) {
         array.eq(i).bind(type, func);
      }
   }

answered Nov 25, 2011 at 18:56

Royi Namir

149k145 gold badges502 silver badges833 bronze badges

3 Comments

Jasper Over a year ago

I'm curious, what is this supposed to fix?

Royi Namir Over a year ago

@jasper array is array of jquery elements. when he to array[0] he get an item which is NOt jquery but pure JAVASCRIPT object which he CANT use the BIND method of jQUERY. but if he use array.eq(i) - he can treat the item as jquery item and BIND him method.

Jasper Over a year ago

I see, this is a good call, rather than turning a jQuery object into a regular JS object and then back into a jQuery object. +1.

Jasper · Accepted Answer · 2011-11-25 19:50:06Z

1

The error message you are getting is exactly what you'd get by trying to run jQuery functions on non-jQuery objects. You can easily fix this by using the index of your for loop to access the jQuery objects in the array variable:

function addEventHandler(array, type, func) {
      var len = array.length;
      for (var i = 0; i < len; i++) {
         array.eq(i).bind(type, func);
      }
   }

sections = $('#sponsorship > div .section')

addEventHandler(sections, 'click', function() {
      console.log(this);
});

Changing array[i].bind(type, func); to array.eq(i).bind(type, func); accesses the jQuery object rather than a regular JS object which will remove the error you're getting.

Here is a jsfiddle of the above change to your code: http://jsfiddle.net/jfUpB/1/

edited Nov 25, 2011 at 19:50

answered Nov 25, 2011 at 19:15

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Comments

MilkyWayJoe · Accepted Answer · 2011-11-25 19:04:32Z

0

I'd replace the for(int...) by jQuery's $.each function as you'd be dealing with the item of the array and not the trying to retrieve the item by index. Also, to use any jQuery function, your object inside the array should be a jQuery object, so I'd do this:

function addEventHandler(array, type, func) {
    var len = array.length;
    $(array).each(function(index, item) {
        $(item).bind(type, func);
    });
}

answered Nov 25, 2011 at 19:04

MilkyWayJoe

9,1122 gold badges41 silver badges53 bronze badges

Comments

Manse · Accepted Answer · 2011-11-25 19:12:43Z

0

$('#sponsorship > div .section').click(function (event) {
   console.log(event.target);
});

or

$('#sponsorship > div .section').each(function(index,item) {
    $(item).click(function (event) {
       console.log(event.target);
    });
});

Whats wrong with this ?

edited Nov 25, 2011 at 19:12

answered Nov 25, 2011 at 19:01

Manse

38.1k11 gold badges88 silver badges112 bronze badges

Comments

Ivan Ferić · Accepted Answer · 2013-02-13 09:11:25Z

0

.each() is performance heavy, and considered 'lazy' even by jQuery's standards.

edited Feb 13, 2013 at 9:11

Ivan Ferić

4,76311 gold badges40 silver badges47 bronze badges

answered Feb 13, 2013 at 8:55

brian

1

Collectives™ on Stack Overflow

jquery add an event handler to objects in an array

6 Answers 6

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related