Assign a click event function to multiple elements in jQuery?

Question

I have multiple checkboxes on a page whose id starts with checkrow.
Id of rows could be checkrow1 or checkrow2 or checkrow21 etc.
I want to assign the click event function to each of these checkboxes.
I tried the following but it doesn't seem to work. What is jQuery code to do this?

$('input[id^="checkrow"]').click(function () {
    alert('1')
});

UPDATE: The above code works. The reason why I was not getting the handler attached to click event was because the check-boxes did not exist when above code was executed. I was using a virtualized HTML5 grid in which the checkboxes were only created in 'Databound' event of the third-party control I was using. Once I put the above code in 'Databound' event then it worked fine.

gdoron · Accepted Answer · 2012-11-04 20:55:33Z

4

Let me guess, those elements are created dynamically after the DOM is ready.

use on - a delegate event.

$('parentSelector').on('click', 'input[id^="checkrow"]', func);

And of course make sure your code lies inside the DOM ready callback.

answered Nov 4, 2012 at 20:55

gdoron

151k59 gold badges302 silver badges376 bronze badges

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

Comments

Throttlehead · Accepted Answer · 2012-11-04 20:55:08Z

3

Use a class for the check boxes and then target the class name with a dot. Each checkbox will have an attribute "class='checkbox'".

$('.checkbox').click(function(){
    alert('Check clicked.');
});

answered Nov 4, 2012 at 20:55

Throttlehead

1,9556 gold badges22 silver badges37 bronze badges

3 Comments

gdoron Over a year ago

This is not answering the question.

ThiefMaster Over a year ago

True, but it is actually what should be done. Possibly with a delegate if he adds the checkboxes dynamically.

gdoron Over a year ago

@ThiefMaster. I'm not sure it should be done this way. there is nothing wrong with using the starts with attributes selector, class selector are fine, but the original use of class is CSS... Anyway it still doesn't answer the question, nor even try to do so. :(

netdjw · Accepted Answer · 2012-11-04 21:34:50Z

1

An other solution: find checkboxes, after select id=checkrow*, then add a click event:

$('input[type=checkbox]').each(function() {
    if ( this.id.match(/^checkrow\d+/) ) {
        $(this).click(function() {
            // do what you want 
        });
    }
});

answered Nov 4, 2012 at 21:34

netdjw

6,10126 gold badges108 silver badges188 bronze badges

Collectives™ on Stack Overflow

Assign a click event function to multiple elements in jQuery?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related