Trying to add event handler to dynamic content using jQuery

Question

I'm trying to add an onclick event handler to a list of checkboxes. Instead of alerting the checkbox ID that I would expect it to (the one I'm clicking on), it's always alerting checkbox number 3 regardless of which on I click. Why is this and how can I get this to behave as desired. When I click on checkbox 2, I want it to alert "2"... etc.

function component (componentId, displayType, parentId) {
    this.componentId = componentId;
    this.parentId = parentId;
    this.displayType = displayType;
}
var components = [];

components.push(new component(0, null, null);
components.push(new component(1, null, null);
components.push(new component(2, null, null);
components.push(new component(3, null, null);


var arrayLength = components.length;
for (var i = 0; i < arrayLength; i++) {
    var component = components[i];
    jQuery('#questionnaireComponentId'+component.componentId).find('input:checkbox').click(
        function(){
            selectParentCheckbox(component.componentId);
            }
    );
}

function selectParentCheckbox(componentId){
    alert(componentId);
}

can you share your generated html as well?

Sushil
– Sushil

2015-09-15 19:18:15 +00:00
Commented Sep 15, 2015 at 19:18 — Sushil
– Sushil, Commented Sep 15, 2015 at 19:18

Community · Accepted Answer · 2017-05-23 11:44:28Z

1

This is happening because of the Javascript closures.

You should pass the parameter each iteration, and not only after finishing the iteration.

for (var i = 0; i < arrayLength; i++) {
    var component = components[i];
    jQuery('#questionnaireComponentId' + component.componentId)
      .find('input:checkbox')
      .click(selectParentCheckbox.bind(null, component.componentId));
}

The bind function allows you to name what the function the click event will be calling and what parameters should be passed to it.

Nothing to do with the question, but only for your information: I think you're misunderstanding the power of jQuery and its event delegation, since you could use a much better aproach at all.

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Sep 15, 2015 at 19:19

Buzinas

11.8k2 gold badges38 silver badges59 bronze badges

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

1 Comment

Dale Over a year ago

Works great! Thank you. And that link was very helpful and informative as well. Although, I'm still now sure how to use that info for a better solution to this particular problem but I'm still thinking about it and have few ideas to try.

Collectives™ on Stack Overflow

Trying to add event handler to dynamic content using jQuery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related