HTML label is not attached to input when added dynamically [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

---

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 9 years ago.

Improve this question

I have a checkbox with a label like this:

<input type="checkbox" id="box1"/>
<label for="box1">Option 1</label>

This renders as expected ,and has the additional bonus that you can click on the label's text to check/uncheck the checkbox.

If I dynamically append more checkboxes and labels with jquery like this:

var optionsPanel = $("#optionsInnerWrapper");
    for(var i = 0; i < allOptions.length; i++)
    {
        optionsPanel.append("<div style='padding:2px;''><input id='box"+i+"' class='filterType' type='checkbox' value='"+allOptions[i]+"'><label for='box'"+i+"''>"+allOptions[i]+"</label></div>");
    }

Everything renders ok, but clicking the label will not check or uncheck the appropiate checkbox. why is this, and can i achieve this effect in another way?

Answer 1

Your jquery code isn't right.

        optionsPanel.append("<div style='padding:2px;''><input id='box"+i+"' class='filterType' type='checkbox' value='"+allOptions[i]+"'><label for='box"+i+"'>"+allOptions[i]+"</label></div>");

What did i change?

You had too much ' here: <label for='box'"+i+"''>"+allOptions[i]+"</label>

<label for='box'"+i+"''>"+allOptions[i]+"</label>

<label for='box"+i+"'>"+allOptions[i]+"</label>

Answer 2

"'><label for='box'"+i+"''>"

should be

"'><label for='box"+i+"'>"

There are extra single quotes in the original.