We Keep Coding

jQuery click event is not working

I have a menu on the left where all the elements have the same class. I've added the event $('.menuitem').click and also tried several other options, even calling the event based on the div id but without success.
As there aren't any error messages on the browser console, I'm kinda lost on the search for the error. I appreciate if you could help me figure out what the problem is.
Here is the Fiddle
HTML:
<div class='mainwindow'>
<div class='menupane'>
<div id='entity' class='menuitem'><p class='glyphicon glyphicon-triangle-right'>ENTITIES</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>COURSES</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>STUDENTS</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>CLASSES</p></div>
<div class='menuitem'></div>
</div>
<div class='contentpane'></div>
</div>
DOM:
$(document).ready(function(){
console.log("loaded");
$('.menuitem').click(function(){
console.log("CLICKED 1");
});
$('#entity').click(function(){
console.log("CLICKED 2");
});
$('.menupane').on('click', '.menuitem', function(){
console.log('CLICKED 3');
});
});
As you can see, I tried adding the click event through several methods and I'm not getting it. Thanks a ton for your help.

Negative z-index will not let event to dispatch on elements.
$(document).ready(function() {
console.log("loaded");
$('.menuitem').click(function() {
console.log("CLICKED 1");
});
$('#entity').click(function() {
console.log("CLICKED 2");
});
$('.menupane').on('click', '.menuitem', function() {
console.log('CLICKED 3');
});
});
.header {
position: absolute;
background-color: #525252;
height: 5%;
width: 100%;
min-height: 30px;
display: block;
margin: 0;
z-index: 0;
font-weight: 700;
line-height: 175%;
font-size: 1.4em;
text-align: center;
color: #FFFFFF;
display: inline-block
}
.mainwindow .menupane {
position: relative;
display: inline-block;
width: 25%;
min-width: 200px;
background-color: #FFFFFF;
margin: 0;
box-shadow: 1px 0px 10px -0px #F5F5F5;
//z-index: -1;
padding-top: 40px;
}
.mainwindow .contentpane {
position: relative;
display: inline-block;
width: 100%;
background-color: #FFFFFF;
margin: 0;
//z-index: -2;
padding-top: 40px;
}
.menuitem {
background-color: #525252;
position: relative;
width: 75%;
height: 1.5em;
min-height: 10px;
border-radius: 0.65em;
margin: 7.5%;
color: lightgray;
/*font-size: 0.8vw;*/
/*line-height: 1.5em;*/
padding-left: 10%;
border: 0.05em solid lightgray;
/*box-shadow: 0px 0px 1px 1px gray;*/
}
glyphicon-triangle-right {
transition: transform 180ms ease-in;
}
glyphicon-triangle-right.rotate90 {
transform: rotate(90deg);
transition: transform 180ms ease-in;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='header'>SISTEMA CONTROLE DE CURSOS</div>
<div class='mainwindow'>
<div class='menupane'>
<div id='entity' class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>ENTITIES</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>COURSES</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>STUDENTS</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>CLASSES</p>
</div>
<div class='menuitem'></div>
</div>
<div class='contentpane'></div>
</div>
Fiddle Demo

Your z-index CSS was causing issues. Here is an updated example without those so you can fix from there: https://jsfiddle.net/zxgkprw9/1/

your issue is not the binding of the event but the class .mainwindow .menupane having this property position: relative;
the events is added properly but due to this class the actual position of the element is different . Remove this property and all work fine
jsfiddle : https://jsfiddle.net/zxgkprw9/3/
.mainwindow .menupane{
display: inline-block;
width: 25%;
min-width: 200px;
background-color: #FFFFFF;
margin: 0;
box-shadow: 1px 0px 10px -0px #F5F5F5;
z-index: -1;
padding-top: 40px;
}

Why are there different results for the following code?

I have a project where I create a virtual workstation using HTML CSS and JavaScript.
The code works smoothly and perfectly, as shown below (minus the images)
<!DOCTYPE html>
<html>
<head>
<title>Malfunction Compueter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<style>
html{
font-family: courier
}
.inner{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: white;
font-size: 20px;
opacity: 1.0;
}
.loadScreen {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999999999999999999999999999999999999999;
background: white;
font-size: 80px;
text-align: center;
padding-top: 150px
}
#cover{
position: relative
}
#content{
padding-top: 50px
}
td{
width: 33.3%
}
table{
width: 100%;
text-align: center
}
.titleSelection{
font-size: 60px;
transition-duration: 0.5s;
line-height: 10px
}
.titleSelection:hover{
box-shadow: 0 15px 19px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.title{
text-align: center;
padding-top: 40px;
}
#titleImage{
height: 200px
}
.selectionIcon{
height: 120px
}
#backgroundImage{
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
z-index: -9999;
text-align: center
}
#background{
width: 100%;
bottom: 0px
}
#title{
font-size: 60px;
font-family: "kaiTi";
text-align: center;
line-height: 5px
}
#exit{
position: fixed;
bottom: 10px;
right: 40px;
z-index: 99999
}
#exit:hover + #exitText{
font-size: 30px
}
#exitText{
transition-duration: 0.5s;
font-family: "kaiTi";
position: fixed;
bottom: 45px;
right: 45px;
z-index: 99999;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
color: white;
}
#fangNiu{
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 74px;
z-index: 999999;
}
.innerTitle{
font-size: 80px;
text-align: center
}
.goodQuotesTable{
width: 20%;
font-size: 25px;
text-align: justify;
padding-right: 10px;
padding-left: 10px;
}
#quotesTable{
border-collapse: collapse;
vertical-align: bottom;
}
b{
font-size: 45px;
text-align: center
}
.quoteImage{
height: 50px;
width: 50px;
}
#summary{
border: 10px;
}
.quote{
color: black;
}
/* tell the container's children to float left: */
.floatLeft > * {
float:left;
margin-right:5px;
}
.floatRight > * {
float:right;
margin-left:5px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* end clearfix*/
/* below is just to make things easier to see, not required */
body > div {
margin-bottom:10px;
}
.characterPicture{
height: 140px;
width: auto
}
#summaryText{
text-align: center;
font-size: 80px
}
.characterText{
font-size: 25px;
}
.tab{
position: relative;
margin-left: 120px;
margin-right: 10px;
}
#summaryItself{
padding: 10px
}
#schoolImage{
height: 290px;
width: auto
}
button{
border-radius: 50%;
background-color: #00FF04;
border-color: #00FF04;
color: white;
font-size: 40px;
transition-duration: 0.4s;
width: 25%;
height: 80px;
}
button:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
background-color: red;
border-color: red;
}
#options{
text-align: center
}
#apps{
text-align: center
}
#languageMenu{
opacity: 0.9;
height: 100%;
width: 100%;
z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999;
}
</style>
<body>
<p id="title">Malfunction Compueter</p><br><p id="title">Version A0.1</p>
<div id="content">
<table id="titleSelections">
<tr>
<td class="titleSelection" id="about"><img src="images/info.png" class="selectionIcon"><br><p>About</p></td>
<td class="titleSelection" id="settings"><img src="images/settings.png" class="selectionIcon"><br><p>Settings</p></td>
<td class="titleSelection" id="apps"><img src="images/apps.png" class="selectionIcon"><br><p>Apps</p></td>
</tr>
</table>
<script>
$(document).ready(function(){
$(".loadScreen").fadeOut("slow")
})
$(document).ready(function(){
$(".inner").fadeOut(0)
$("#exit").fadeOut(0)
$("#exitText").fadeOut(0)
$("#languageMenu").fadeOut(0)
})
$("#about").on("click",function(){
$("#info").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#settings").on("click",function(){
$("#options").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#apps").on("click",function(){
$("#applications").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("html").on("click","#exit",function(){
$("#exit").fadeOut(500)
$("#exitText").fadeOut(500)
$(".inner").fadeOut(500)
$("#fangNiu").fadeOut(500)
$("#languageMenu").fadeOut(500)
$("#backgroundImage").fadeIn(500)
})
$("#language").on("click",function(){
$("#languageMenu").fadeIn(500)
})
</script>
</body>
<div class="loadScreen">MALFUNCTION COMPUETER <br> MODEL A0.1</div>
<img src="images/logout.png" id="exit">
<p id="exitText">Exit</p>
<div id="options" class="inner" style="display: none">
<b>OPTIONS</b>
<br>
<br>
<br>
<button id="language">Languages</button>
<br>
<br>
<br>
<button id="wifi">Wifi connection</button>
</div>
<div id="applications" class="inner" style="display: none">
<b>APPS</b>
</div>
<div id="info" class="inner" style="display: none">
<b>ABOUT MALFUNCTION COMPUETER</b>
<p>Malfunction compueter is a 非常好的 computer software OS that runs on 你的电脑屏幕上 in the programming language 语文。.</p><br>
<p>In order to get the best out of malfunction compueter, one must 把你的脸爆炸，然后, and then one must also 死掉。这样.</p>
</div>
<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
<option>English</option>
<option>Chinese</option>
<option>Japanese</option>
</select></div>
</html>
However, there is one set of lines that is not running properly:
<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
<option>English</option>
<option>Chinese</option>
<option>Japanese</option>
</select></div>
^This is the DIV "#languageMenu", where the user selects his language.
Here, I have a button "#language" which on click, is supposed to make "#languageMenu" appear.
$("#language").on("click",function(){
$("#languageMenu").fadeIn(500)
})
Strangely, this does not work when I run it on Google Chrome, but when I put it in a JSFiddle it gives strange results.
http://jsfiddle.net/b58Lvtfy/1
From Chrome, what happens is that the language menu only appears upon pressing the exit button, and then fades immediately.
Why might this be so and what amendments might make the code work better?
Online demo: http://garridpunching.neocities.org/malfunction.html

Put every event binding inside doc ready block:
$(document).ready(function() {
$(".inner").fadeOut(0)
$("#exit").fadeOut(0)
$("#exitText").fadeOut(0)
$("#languageMenu").fadeOut(0)
$("#about").on("click", function() {
$("#info").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#settings").on("click", function() {
$("#options").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#apps").on("click", function() {
$("#applications").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("html").on("click", "#exit", function() {
$("#exit").fadeOut(500)
$("#exitText").fadeOut(500)
$(".inner").fadeOut(500)
$("#fangNiu").fadeOut(500)
$("#languageMenu").fadeOut(500)
$("#backgroundImage").fadeIn(500)
})
$("#language").on("click", function() {
$("#languageMenu").fadeIn(500)
})
})
Because your button appears after event binding so no events bound on this element and cause as error. That is why it is always safe to put event bindings inside doc ready block.
Or you can shift your script to the closing of </body>.

Your inproper indentation obscures the errror, but you are closing the DOMReady listener, before you are binding the #language click listener. Therefore, #language does not exist in the DOM when the click listener is added.

Dynamically Generate id, and assign to label

$(document).ready(function() {
$("body").tooltip({
selector: '[data-toggle=tooltip]'
});
});
var unique_id=0;
$('#update').on('click', function() {
if ($('#myText').val().length == 0) {
alert('Are you Kidding ? ;)')
return
}
unique_id++;
$('#result').append('<li>' + '<input id="checkboxFourInput" type="checkbox" class="todo-item" /> <label for="checkboxFourInput"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
// $('#myText').val("").attr("disabled", "disabled");
// update value
$('#myText').val('').change();
});
$('#myText').on("focus click", function() {
$('#update').removeClass("gray_text");
$('#update').addClass("show");
});
$('#edit').on('mouseup', function() {
console.log($('#myText'));
$('#myText').prop("disabled", false).focus().select();
});
$('#myText').on("focus click", function() {
$('#update').removeClass("gray_text");
$('#update').addClass("show");
})
$('.hide').on("click", function() {
$('.hide').removeClass("show");
});
$('#result ').on('click', 'li .glyphicon-remove', function() {
// alert('Clicked');
$(this).closest('li').remove();
});
.editable_text{
margin: 20px;
/*padding: 15px;*/
border: 1px solid #ccc;
width: 300px;
border-radius: 5px;
background: white;
display: inline-block;
text-align: left;
}
ul#result{
padding: 0;
margin: 0;
position: relative;
top: -40px;
border-top: 1px solid #ccc;
}
#result li {
padding: 15px 25px;
border-bottom: 1px solid #ccc;
list-style: none;
font-size: 18px;
font-weight: 100;
color: #555;
letter-spacing: 1px;
width: 100%;
}
#myText{
margin: 0;
padding: 20px 30px 20px 40px;
border: transparent;
border-bottom: 1px solid #ccc;
position: relative;
/*left: -16px;*/
width: 100%;
top: -40px;
}
.btns{
width:100%;
position: relative;
padding: 20px 0;
}
.plus {
padding: 0 20px;
cursor: pointer;
position: relative;
right: 2px;
z-index: 1;
}
.okay{
float: right;
position: relative;
right: -2px;
top: 0px;
padding: 0 20px;
cursor: pointer;
z-index: 1;
}
.gray_text{
opacity: 0.2;
color: #222;
}
.show{
opacity: 1;
color: blue;
}
input[type=checkbox] {
visibility: hidden;
}
#result label {
cursor: pointer;
position: absolute;
width: 24px;
height: 24px;
top: 15px;
left: 15px;
background: #fff;
border: 1px solid #4AADF1;
border-radius: 100%;
}
#result label:focus{
background: #4AADF1;
}
#result label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 12px;
height: 5px;
left: 5px;
top: 7px;
background: transparent;
border: 2px solid white;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/**
* Create the hover event of the tick
*/
#result label:hover::after {
opacity: 0.5;
}
/**
* Create the checkbox state for the tick
*/
#result input[type=checkbox]:checked + label:after {
opacity: 1;
}
#result input[type=checkbox]:checked + label{
background: #4AADF1;
}
.todo-item-del{
text-align: right;
float: right;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<div class="editable_text">
<div class="btns">
<a id="edit" class="pull-left plus" data-toggle="tooltip" data-placement="bottom" title="Click to Add">
<i class="glyphicon glyphicon-plus"></i>
</a>
<a id="update" class="gray_text okay" data-toggle="tooltip" data-placement="right" title="Click to Okay">
<i class="glyphicon glyphicon-ok"></i>
</a>
</div>
<input type='text' id="myText" placeholder="Add new goals"/>
<ul id="result"></ul>
</div>
</div>
Hi there,
I'm trying to implement a To-Do-List for my Admin Dashboard, where I got strucked up, in this I was appending a li in my To-Do-List as an item, for the very first time its is working fine, am getting checkbox which is working too, but when am creating the second To-Do, it is getting error, and the check box isn't working.
here's the code which I was trying but dint get succeeded
$('#result').append('<li>' + '<input "$(this).attr("id",$(this).attr("id")+"_"+(unique_id))" type="checkbox" class="todo-item" /> <label for="(unique_id)"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
following is the fiddle link

2 issues:
id for the checkbox needs to be based on unique_id
#result label { ... top: 15px; ... } is causing each checkbox to be fixed at the same y position.
$(document).ready(function() {
$("body").tooltip({
selector: '[data-toggle=tooltip]'
});
});
var unique_id = 0;
$('#update').on('click', function() {
if ($('#myText').val().length == 0) {
alert('Are you Kidding ? ;)')
return
}
unique_id++;
$('#result').append('<li>' + '<input id="checkbox'+unique_id+'Input" type="checkbox" class="todo-item" /> <label for="checkbox'+unique_id+'Input"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
// $('#myText').val("").attr("disabled", "disabled");
// update value
$('#myText').val('').change();
});
$('#myText').on("focus click", function() {
$('#update').removeClass("gray_text");
$('#update').addClass("show");
});
$('#edit').on('mouseup', function() {
console.log($('#myText'));
$('#myText').prop("disabled", false).focus().select();
});
$('#myText').on("focus click", function() {
$('#update').removeClass("gray_text");
$('#update').addClass("show");
})
$('.hide').on("click", function() {
$('.hide').removeClass("show");
});
$('#result ').on('click', 'li .glyphicon-remove', function() {
// alert('Clicked');
$(this).closest('li').remove();
});
.editable_text {
margin: 20px;
/*padding: 15px;*/
border: 1px solid #ccc;
width: 300px;
border-radius: 5px;
background: white;
display: inline-block;
text-align: left;
}
ul#result {
padding: 0;
margin: 0;
position: relative;
top: -40px;
border-top: 1px solid #ccc;
}
#result li {
padding: 15px 25px;
border-bottom: 1px solid #ccc;
list-style: none;
font-size: 18px;
font-weight: 100;
color: #555;
letter-spacing: 1px;
width: 100%;
}
#myText {
margin: 0;
padding: 20px 30px 20px 40px;
border: transparent;
border-bottom: 1px solid #ccc;
position: relative;
/*left: -16px;*/
width: 100%;
top: -40px;
}
.btns {
width: 100%;
position: relative;
padding: 20px 0;
}
.plus {
padding: 0 20px;
cursor: pointer;
position: relative;
right: 2px;
z-index: 1;
}
.okay {
float: right;
position: relative;
right: -2px;
top: 0px;
padding: 0 20px;
cursor: pointer;
z-index: 1;
}
.gray_text {
opacity: 0.2;
color: #222;
}
.show {
opacity: 1;
color: blue;
}
input[type=checkbox] {
visibility: hidden;
}
#result label {
cursor: pointer;
position: absolute;
width: 24px;
height: 24px;
/*top: 15px;*/
left: 15px;
background: #fff;
border: 1px solid #4AADF1;
border-radius: 100%;
}
#result label:focus {
background: #4AADF1;
}
#result label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 12px;
height: 5px;
left: 5px;
top: 7px;
background: transparent;
border: 2px solid white;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/**
* Create the hover event of the tick
*/
#result label:hover::after {
opacity: 0.5;
}
/**
* Create the checkbox state for the tick
*/
#result input[type=checkbox]:checked + label:after {
opacity: 1;
}
#result input[type=checkbox]:checked + label {
background: #4AADF1;
}
.todo-item-del {
text-align: right;
float: right;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<div class="editable_text">
<div class="btns">
<a id="edit" class="pull-left plus" data-toggle="tooltip" data-placement="bottom" title="Click to Add">
<i class="glyphicon glyphicon-plus"></i>
</a>
<a id="update" class="gray_text okay" data-toggle="tooltip" data-placement="right" title="Click to Okay">
<i class="glyphicon glyphicon-ok"></i>
</a>
</div>
<input type='text' id="myText" placeholder="Add new goals" />
<ul id="result"></ul>
</div>
</div>

An easy way to create a unique id in JS is with the Date object and getTime() which returns the number of milliseconds since 1 January 1970 00:00:00 UTC.
new Date().getTime(); // 1461348496454
However, it looks like this is not the reason the label/checkboxes appear to be missing. They are there; they're just all in the same spot because they are position: absolute. You just need to add position: relative to your li.
On a side note, I recommend using some type of client side templating for this kind of task. It will make it easier to spot problems and keep things clean. Handlebars may be overkill if you aren't doing this much on your site. You may want to look into Underscore for simple things like this. It would be a easy and quick to implement.
http://underscorejs.org/#template
Example:
http://www.bennadel.com/blog/2411-using-underscore-js-templates-to-render-html-partials.htm
You would only need to change a couple things to use underscore templates. First include underscore in your page, then add a script tag for the template partial:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"/>
<script type="text/template" class="template">
<li>
<input id="<%- uid %>" type="checkbox" class="todo-item">
<label for="<%- uid %>"></label><%- labelText %><i class="glyphicon glyphicon-remove todo-item-del"></i>
</li>
</script>
Change your click handler to construct a data object for the template and use the template to create your html string:
// _.template returns a function that is used to produce html string using whatever data you pass.
var todoTemplate = _.template( $( 'script.todoTemplate' ).html() );
$('#update').on('click', function() {
var $myText, labelText, uid, templateData, html;
$myText = $('#myText');
labelText = $myText.val();
if (labelText.length === 0) {
alert('Are you Kidding ? ;)');
return;
}
// create the unique id for the label
uid = new Date().getTime();
// create the template data object
templateData = {
uid: uid,
labelText: labelText
};
// use your template function to produce the html string you will append
html = todoTemplate(templateData);
$('#result').append(html);
// update value
$myText.val('').change();
});
I've created a jsfiddle to test it out if you want to see a working example:
https://jsfiddle.net/n7bwymno/1/

jQuery - Maintaining focus on button when clicked outside of it

So I've been able to create 2 buttons. Here: http://jsfiddle.net/0y940r11/2/
I really can't figure out how I can keep the focus on the clicked button after I have click somewhere outside the buttons.
Can some one point me in the direction?
$(document).ready(function() {
$(".button-off").on("click", function() {
$(".corner-off").show();
$(".corner-on").hide();
});
$(".button-on").on("click", function() {
$(".corner-on").show();
$(".corner-off").hide();
});
});
.button-on,
.button-off {
border: 1px solid #ccc;
height: 120px;
width: 160px;
position: relative;
background: white;
border-radius: 8%;
}
.button-on:active,
.button-on:focus,
.button-off:active,
.button-off:focus {
border: 4px solid #FFCC00;
}
.active {
border: 4px solid #FFCC00;
}
button:active,
button:focus {
outline: 0;
}
.corner-off,
.corner-on {
width: 0px;
height: 0px;
border-bottom: 30px solid transparent;
border-left: 30px solid #FFCC00;
position: absolute;
top: 0;
left: 0;
}
.tick:after {
content: "\2713";
position: absolute;
top: -1px;
left: 5px;
color: white;
}
<button class="button-on">
<div class="corner-on" style="display:none"></div>
<span class="tick"></span>
ON
</button>
<button class="button-off">
<span class="corner-off" style="display:none"></span>
<span class="tick"></span>
OFF
</button>

use $(document).on("click" and focus() to achieve this
var lastClickedButton = $(".button-on")[0];
$(document).ready(function () {
$(".button-off").on("click", function () {
lastClickedButton = this;
$(".corner-off").show();
$(".corner-on").hide();
});
$(".button-on").on("click", function () {
lastClickedButton = this;
$(".corner-on").show();
$(".corner-off").hide();
});
});
$(document).on("click", function (e) {$(lastClickedButton).focus();});
.button-on, .button-off {
border: 1px solid #ccc;
height: 120px;
width: 160px;
position: relative;
background: white;
border-radius: 8%;
}
.button-on:active, .button-on:focus, .button-off:active, .button-off:focus {
border: 4px solid #FFCC00;
}
.active {
border: 4px solid #FFCC00;
}
button:active, button:focus {
outline:0;
}
.corner-off, .corner-on {
width: 0px;
height: 0px;
border-bottom: 30px solid transparent;
border-left: 30px solid #FFCC00;
position: absolute;
top: 0;
left: 0;
}
.tick:after {
content:"\2713";
position: absolute;
top: -1px;
left: 5px;
color: white;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button-on">
<div class="corner-on" style="display:none"></div> <span class="tick"></span>
ON</button>
<button class="button-off"> <span class="corner-off" style="display:none"></span>
<span class="tick"></span>
OFF</button>
Demo : http://jsfiddle.net/kishoresahas/0y940r11/4/

click inside anywhere in the box,getting closed

input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
.ds-drop-down {
background: url('../../images/light-grey-disclosure-arrow-down.png')no-repeat scroll center center transparent;
padding: 10px 5px;
height: 0px;
width: 8px;
position: absolute;
top: 63px;
border: 1px solid blue;
}
div#span-advanced-search {
border: 1px solid grey;
display: none;
left: 20px;
width: 600px;
padding: 10px;
}
div#span-advanced-search label{
width: 100px;
}
input[type=checkbox]:checked ~ div#span-advanced-search {
background: white;
display: block;
position: relative;
width: 564px;
padding: 10px;
visibility: visible;
left: -573px;
top: 11px;
}
<input class="ds-text-field " type="text">
<xsl:attribute name="name">
<xsl:value-of
select="/dri:document/dri:meta/dri:pageMeta/dri:metadata[#element='search'][#qualifier='queryField']"/>
</xsl:attribute>
</input>
<label for="toggle-1" class="ds-drop-down" role="button" data-tooltip="Show search options"/>
<input type="checkbox" id="toggle-1">
<div id="span-advanced-search">
<label>Education Level:</label> <input id="text_edulvl" type="text"/><br></br>
<label>Type of Learning Material:</label> <input id="text_lm" type="text"/><br></br>
<label>Difficulty Level:</label> <input id="text_difflvl" type="text"/><br></br>
<label>Author:</label> <input id="text_author" type="text"/><br></br>
</div>
This is my code snippet. When I click on the checkbox "toggle-1", the div "span-advanced-search" will open,it's right. But after open the div,when i am clicking anywhere inside the div,it's getting closed. So,i can't give any input to those inputs(i.e. Education Level,Author etc.). I want the div will be closed only when the checkbox will be unchecked.

Solution must be as I thought. I hope you are looking for this: http://jsfiddle.net/vhoeamcq/
function srchMoreActive(t){
if(t){
document.getElementById('srchMoreOpt').classList.remove('hid');
document.getElementById('srchMore').classList.add('hid');
}else{
document.getElementById('srchMoreOpt').classList.add('hid');
document.getElementById('srchMore').classList.remove('hid');
}
}
function form1Sub(){
}
function srch(){
}
#form1 #s00{padding: 5px 25px 5px 5px; width:300px; border:1px solid rgba(0,0,0,0.2);}
#form1 #srchMore{margin-left:-27px; cursor:pointer; color:#ccc;}
#form1 #srchMore:hover{color:#0ac;}
#form1 .srchMoreAct{color:#333;}
#form1 #srchMoreOpt{width:320px; height:350px; padding:5px; box-shadow:0 2px 4px rgba(0,0,0,0.2); border:1px solid rgba(0,0,0,0.2);}
#form1 .hid{display:none;}
#form1 #srchMoreOpt .exi{float:right; padding:5px 10px 5px 10px; font-family:'Arial'; cursor:pointer; background:#ccc; color:#666;}
#form1 #srchMoreOpt .exi:hover{background:#0ac; color:#fff;}
<form id="form1" action="" method="post" onSubmit="form1Sub()">
<input id="s00" name="s" type="text" value="" placeholder="Type to serach" onChange="srch()" />
<span id="srchMore" onClick="srchMoreActive(true)">▼</span>
<div id="srchMoreOpt" class="hid">
<span class="exi" onClick="srchMoreActive(false)">x</span>
<p>Form Details</p>
<p><input type="text" /></p>
</div>
</form>

try this Jquery:
$('#toggle-1').click(function(){
var a = $(this).is(":checked");
if(a){
$('#span-advanced-search').css("display","block")
}
else{
$('#span-advanced-search').css("display","none")
}
});