用javaScript注入的html文本输入将忽略onclick材质设计css

Question

I am doing a templating platform and I am using material design for the looks. I just started coding the part where inputs are injected to the form. The thing is that I just started injecting text inputs and it looks as it should but the onclick css is not working! (The onclick css makes a blue line expand from the center of the text input, telling that the input is in focus)

This is how I am injecting the html:

document.getElementById("smallTextField").onclick = function () {
let div = document.getElementById("formContainer")
div.insertAdjacentHTML("afterbegin", '<div class="col-sm-3">\n' +
    '                                    <div class="form-group">\n' +
    '                                        <div class="form-line" id="test">\n' +
    '                                            <input type="text" class="form-control" placeholder="col-sm-3">\n' +
    '                                        </div>\n' +
    '                                    </div>\n' +
    '                                </div>');}

I hope you can understand my problem :/

Answer 1

If you are able to use jQuery, one option you have is to utilize the $element.prepend() function after binding to the click event.

 $('#smallTextField').on('click', function () { let $div = $('#formContainer'); $div.prepend( '<div class="col-sm-3">\\n' + ' <div class="form-group">' + ' <div class="form-line" id="test">' + ' <input type="text" class="form-control" placeholder="col-sm-3" />' + ' </div>' + ' </div>' + '</div>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="smallTextField" placeholder="smallTextField" /> <div id="formContainer"></div>