Materialize: Dynamically added checkbox ?

[kohaistyle]

Hello there. Nice work on the framework.

Seen in the issues about content ( like inputs ) added dynamically. I happen to have the same pb with checkbox/radiobox not displayed when i add them to the dom with jquery.

Is there a way to re-init all components ? I didn't find any init functions in materialize.js.

Regarding this, i suggest your framework should really use some namespace or prefix, so that classic html components could still be used without hacking back into materialize.css !

[Dogfalo]

Just add a label and Id

[kohaistyle]

Ah thx .... it displays now, my bad.
But the checkbox isn't responding to click/touch events ... any ideas ?

[Dogfalo]

Add for and id. See the documentation.
On Feb 26, 2015 9:42 AM, "kohaistyle" [email protected] wrote:

Ah thx .... it displays now, my bad.
But the checkbox isn't responding to click/touch events ... any ideas ?

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/763#issuecomment-76189007.

[kohaistyle]

yup, just saw that it works with the ID !

Thx for your help ;) and quick replies, you rock !

[Dogfalo]

No problem!
On Feb 26, 2015 9:44 AM, "kohaistyle" [email protected] wrote:

yup, just saw that it works with the ID !

Thx for your help ;) and quick replies, you rock !

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/763#issuecomment-76189432.

[whizdummy]

Good day! I'm also having a problem about dynamic checkbox not having a response to click events. I already added dynamic id and for.

let counter = 1;

$("#add-target-audience-btn").on("click", () => {
    let targetAudienceInput = $("#target-audience-input");

    if (targetAudienceInput.val()) {
        const markup = "<tr>"
            + "<td><p><input type='checkbox' id='target-audience-chk" 
            + counter 
            + "' /><label for='target-audience-chk" 
            + counter 
            + "'></label></p></td>"
            + "<td>" 
            + targetAudienceInput.val() 
            + "</td>"
        + "</tr>";

        $("table tbody").append(markup);

    targetAudienceInput.val(null);
    targetAudienceInput.trigger('autoresize');

    counter++;
    } else {
        alert("Empty Input!");
    }
}); 

[akemd]

Checkboxes don't work (they display, but you can't check or uncheck them) if they are contained within something with class input-field. Even if the checkboxes are in a table, if the table is in a div with class input-field they won't work. Took me a bit of head scratching to figure this out so maybe it will help someone else.

[geonanorch]

Thank you @akemd, got stuck a while with the same issue until I saw your comment.

@Dogfalo I am not sure if this changed in v1.0, but looks like a problem?

• not possible to align text input and checkbox using input-field class
• strictly speaking a check is an input field ;-)
• the behavior described by @akemd is definitely not what one would expect...

(I do not want to sound ungrateful, I like materializecss and use it a lot, just trying to help improve it!)