Weird OnsenUI behavior
-
Please check out the following codepen:
https://codepen.io/anon/pen/mqRPEw
If I comment out the <div> tag block. The <ons-input> and Save button tag disappear!! Could you explain why this is happening?
<ons-navigator id="myNavigator" page="page2.html"></ons-navigator> <template id="page2.html"> <ons-page id="page2"> <!-- comment out the <div> tag block. The <ons-input> and Save button disappear --> <div> <ons-input id="employeeID" placeholder="Employee ID" type="text" value="150" /> </div> <input type="submit" id="save" value="Save" /> </ons-page> </template>
JS:
document.addEventListener('click', function(event) { if ( event.target.id == "save") { var e = document.getElementById('employeeID'); alert(e.value); } });
-
Jamal
Actually it’s quite simple.
Include closing </ons-input> tag. It works fine.
<ons-navigator id=“myNavigator” page=“page2.html”></ons-navigator>
<template id="page2.html"> <ons-page id="page2">
<!-- comment out the <div> tag block. The <ons-input> and Save button disappear -->
<ons-input id="employeeID" placeholder="Employee ID" type="text" value="150"></ons-input> <input type="submit" id="save" value="Save" /> </ons-page> </template>
-
@mmike, thanks! How did I miss that!!
I think the confusion comes from the fact that some HTML tags require an explicit closing tags while others do not such as:
<input name=“Text1” type=“text” />
VS
<ons-input id=“test”></ons-input>
-
@jamal Only a few native HTML elements are self-closing tags, like
<input />
or<link />
. There is no way to create a self-closing tag using Custom Elements, so remember to close them when using Onsen UI or any other library :P