Question

I have a checkbox formatted like so:

<label for="option1">
    <input type="checkbox" id="option1"> Foo
</label>

The checkbox appears in a jQuery modal. When the contents of the modal are pulled from the same page that the modal is activated from then clicking the <label> checks the checkbox as expected.

But when the exact same contents of the modal are pulled via Ajax from an external file, clicking the <label> no longer checks the checkbox. You have to click directly on the checkbox to check it.

Why does the <label> clicking behavior change if the contents are being pulled via Ajax?

(I can provide the JS I’m using to pull the external file if needed, but thought this might be a broader problem/solution perhaps.)

Answer 1

You need a live event, as you element appears to DOM at late.

$(document).on('click', 'input[type=checkbox][id^=option]', function() {
  alert('clicked');
});