Refresh the Jquery Css for a HTML control using knockout in Javascript.

If you are a JavaScript developer then you might have come across a situation where you load your HTML controls after the page load has happen, which is like dynamic binding of controls.

And then you see your input type text doesn't have the proper Css as other inputs.

You also load select (dropdown) that also doesn't have the proper css.

You are in chrome and press F-12 to inspect the element, you see that nothing is there in control, it is not applying the JQuery css.

But the controls that are loaded in page load have it.

What to do, no options just to manually copy the CSS classes.

VERY BAD IDEA?

Just do this,

In HTML

<input type="date" data-bind="inputsRefresh: $element, value: $data.EndDate" />

and in JS binding handler

        ko.bindingHandlers.inputsRefresh = {

            init: function (element) {

                $(element).textinput().trigger('create');

            }

        };

Its only good if you are using knockout, you can thank me later. ;)