While following a tutorial, I see style sheet is not applied to clicked element in the list. What Could be the possible reason?
The following sample works this way if some string is added to text box and then button is clicked, a new item gets added to list. If item in the list is clicked it should be stroked through.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#taskText').keydown(function (evt) {
if (evt.keyCode == 13) {
addTask(this, evt);
}
});
$('#addTask').click(function (evt) {
addTask(document.getElementById('taskText'), evt);
});
// following statements not working
$('#tasks li').live('click', function(evt) {
$(this).addClass('done');
});});
function addTask(textBox, evt) {
evt.preventDefault();
var taskText = textBox.value;
$('<li>').text(taskText).appendTo('#tasks');
textBox.value = "";
};
</script>
<style type="text/css">
.done{
text-decoration:line-through;
}
</style>
</head>
<body>
<ul id="tasks">
</ul>
<input type="text" id="taskText" />
<input type="submit" id="addTask"/>
</body>
</html>
The live() function was removed in jQuery 1.7 and does not exist at all in jQuery 2.x.
If you check your browser's developer console, chances are you'll see an error message along those lines.
$(document).ready(function() {
$('#addTask').click(function() {
var taskText = $('#taskText').val();
var li = $('<li>' + taskText + '</li>');
$('ul#tasks').append(li);
$('#taskText').val('');
$(li).click(function() {
$(this).toggleClass('done');
});
});
});
li {
font-family: arial;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}
.done{
text-decoration: line-through;
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ul id="tasks">
<!-- List Goes Here... -->
</ul>
<!-- Textbox / Input Buttons -->
<input type="text" id="taskText" />
<input type="submit" id="addTask"/>
</body>
</html>
$('#tasks li').click(function(){
$(this).addClass('class-name');
};
should work. Check to make sure all your syntax is correct (ie. no random semicolons)
As mentioned by ceejayoz . The live() function was removed in jQuery 1.7 and does not exist at all in jQuery 2.x.
The reason your click on the list was not working is better explained on this question: Click event on dynamically generated list items using jquery
here's what the code could look like for you
$(document).ready(function() {
$('#taskText').keydown(function(evt) {
if (evt.keyCode == 13) {
addTask(this, evt);
}
});
$('#addTask').click(function(evt) {
addTask($('#taskText'), evt);
});
$('#tasks').on('click', 'li', function(evt) {
$(this).addClass('done');
});
});
function addTask(textBox, evt) {
evt.preventDefault();
var taskText = textBox.val();
$('<li>').text(taskText).appendTo('#tasks');
textBox.val("");
};
.done {
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tasks">
</ul>
<input type="text" id="taskText" />
<input type="submit" id="addTask" />
Related
In jQuery I want to be able to add and remove an element. I got the code for appending an element. Now I want to remove that same element when I click on it.
What is the best way to make this so called ToDo list in jQuery?
$(document).ready(function () {
$("#add").click(function () {
var newToDo = $("#newToDo").val();
if(newToDo.length > 0){
$("#toDoList").append("<p>" + newToDo + "</p>");
$("#newToDo").val(" ");
}
});
});
<h1>Todo list</h1>
<form name="form" action="#">
<input id="newToDo" type="text" name="in">
<button id="add">Add!</button>
</form>
<div id="toDoList"></div>
You should use event delegation to attach event to dynamically created elements like :
$("#toDoList").on('click', 'p', function() {
$(this).remove();
});
NOTE : Any button tag inside a form will be considered as submit button so it will refresh you page, to avoid that you should add type="button" to your button, like :
<button type="button" id="add">Add!</button>
Hope this helps.
$(document).ready(function() {
$("#add").click(function() {
var newToDo = $("#newToDo").val();
if (newToDo.length > 0) {
$("#toDoList").append("<p>" + newToDo + "</p>");
$("#newToDo").val(" ");
}
});
$("#toDoList").on('click', 'p', function() {
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Todo list</h1>
<form name="form" action="#">
<input id="newToDo" type="text" name="in">
<button type="button" id="add">Add!</button>
</form>
<div id="toDoList"></div>
You can simply store the element in a variable:
$(document).ready(function () {
$("#add").click(function () {
var newToDo = $("#newToDo").val();
if(newToDo.length > 0){
var anotherToDo = $("<p>" + newToDo + "</p>");
$("#toDoList").append(anotherToDo);
$("#newToDo").val(" ");
// later when you want to delete it
anotherToDo.remove();
}
});
});
Or give it an ID and then remove it using that:
$(document).ready(function () {
$("#add").click(function () {
var newToDo = $("#newToDo").val();
if(newToDo.length > 0){
var anotherToDo = $("<p>" + newToDo + "</p>").attr('id', '#someid');
$("#toDoList").append(anotherToDo);
$("#newToDo").val(" ");
// later when you want to delete it
$('#someid').remove();
}
});
});
Looks like it's already been answered for you, but here's an easy way to do what you want in jQuery:
// external.js
$(function(){
var todo = $('#todo');
function todos(){
$('#todos>li').click(function(){
todo.val($(this).text());
});
}
function remove(){
$('#todos>li').remove(":contains('"+todo.val()+"')");
}
function add(){
var tv = $.trim($('#todo').val());
if(tv !== ''){
remove(); $('#todos').append('<li>'+tv+'</li>'); todos(); todo.val('');
}
}
todo.focus(function(){
todo.val('');
});
$('#frm').submit(function(e){
add(); e.preventDefault();
});
$('#add').click(add);
$('#rmv').click(function(){
remove(); todos();
});
});
/* external.css */
html,body{
padding:0; margin:0;
}
.main{
width:940px; padding:20px; margin:0 auto;
}
label{
margin-right:4px;
}
#todos>li{
cursor:pointer;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width' />
<title>Add Remove to List - jQuery</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div class='main'>
<form id='frm' name='frm'>
<label for='todo'>New To Do</label><input id='todo' name='todo' type='text' /><input id='add' name='add' type='button' value='add' /><input id='rmv' name='rmv' type='button' value='remove' />
<ol id='todos'></ol>
</form>
</div>
</body>
</html>
It the New To Do input (without the quotes, of course): Type "Go to the Store". Hit Enter. Type "Do my Hair". Hit Enter. Type "Go on a Bike Ride". Hit Enter. Click on the list now where you want to remove then press the remove button. If it was an accident, you can press add again, but focusing on the input clears the text, for your next input, with this design. It's also form ready for database implementation.
In my application I have the following html with js and stylesheet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drag'n'Drop demo</title>
<style>
#dropArea{
min-width:50%;
min-height:800px;
background-color:#FF00BB;
float: left;
}
#imgArea {
min-width:49%;
min-height:800px;
background-color:#0F0FBB;
float: right;
}
#imgArea img {
display:block;
margin:5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
var onDropCallback=function(event){
event.preventDefault();
console.log("Droped")
}
var dragSrart=function(event){
// alert("DragStarted")
console.log("Drag Started");
}
var ondragoverCallback=function(event){
var elem=event.target || event.srcElement;
$(elem).css('border',"1px solid black");
}
var dragEndCallback=function(event){
event.preventDefault();
console.log("Drag End HAppened");
$("#dropArea").css('border',"none");
}
</script>
</head>
<body>
<div id="dropArea" ondragover="ondragoverCallback(event)" ondrop="onDropCallback(event)" ></div>
<div id="imgArea">
<img draggable="true" ondragstart="dragSrart(event)" ondragend="dragEndCallback(event)" src="https://kazasou.files.wordpress.com/2010/08/g288.gif">
</div>
</body>
</html>
But for some reason even though the events ondragstart and ondragend gets fired I cannot figure out why the drop event does not fire at all. I have looked on https://www.w3schools.com/HTML/html5_draganddrop.asp and on https://www.w3schools.com/HTML/tryit.asp?filename=tryhtml5_draganddrop but I cannot figure out how different is my code from the examples.
As you can see on: https://www.w3schools.com/HTML/tryit.asp?filename=tryhtml5_draganddrop you must preventDefault during on dragover event so the ondragoverCallback should have the following code:
var ondragoverCallback=function(event){
event.preventDefault();
var elem=event.target || event.srcElement;
$(elem).css('border',"1px solid black");
}
I have this code, and it is working fine on my test website but not in a browser as local (on my hdd) standalone page
Here it the code in jfiddle: https://jsfiddle.net/9jdsvjfb/
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
var ele = document.getElementById(divId);
ele.toggle();
}
</script>
<style>
a:hover {
color: purple;
}
a:active {
color: purple;
}
</style>
<title></title>
</head>
<body>
<a class="ConceptLevel1" href="javascript:toggleDiv('PktS/h+L5EeSqM/4hMH9JA==');"
style="text-decoration: none; font-weight:bold; font-size:13pt">BGP -concept list</a>
<br />
<div style="padding-left:15px;" id="PktS/h+L5EeSqM/4hMH9JA==">
<div>fds</div>
<div>sdfdsfdfdsf</div>
<div>sdfsdf</div>
<div>gdhgf</div>
<a class="ConceptLevel2" href="javascript:toggleDiv('SPrQVTbDx0WO6As2F+43tw==');"
style="text-decoration: none; font-weight:bold; font-size:12pt">hfghg</a>
<br />
<div style="padding-left:15px;" id="SPrQVTbDx0WO6As2F+43tw==">
<div>hfghgh</div>
<div>fghfgh</div>
</div>
</div>
</body>
</html>
I can see two problems here. First, Divs doesn't have a toggle function; I think you mean:
function toggleDiv(divId) {
var ele = jQuery('#' + divId);
ele.toggle();
}
The other problem is in the jsFiddle: since jsFiddle sends all Javascript wrapped inside a function (in windows.load) it is needed to define the function toggleDiv as a global variable, for it to be found when clicking the link:
window.toggleDiv = function (divId) {
var ele = jQuery('#' + divId);
ele.toggle();
}
Just a final note: It may be better if instead of embedding the Javascript insite the HMTL, you use events in order to bind the toggle function to the links' click event.
I want to use .detach and .prepend with a checkbox, I found this function that uses it with two buttons:
$(document).ready(function(){
var x;
$("#btn1").click(function(){
x = $("p").detach();
});
$("#btn2").click(function(){
$("body").prepend(x);
});
});
But how can I use it with a check box? And when the checkbox is checked it prepend the elemento to the body, and when is unchecked detach the element.
Right now I am using fade in and fade out, but I want to change that to detach and prepend:
$('#toggle').change(function () {
if (!this.checked)
// ^
$('.content').fadeOut('slow');
else
$('.content').fadeIn('slow');
});
How about this:-
var x;
$('#toggle').change(function() {
if (!this.checked)
x = $('.content').detach();
else
$('body').append(x);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="toggle" checked="true" />
<div class="content">
content content content content content content content content content content content content
</div>
Check if this example helps you get a clarity.
$(document).ready(function() {
var p;
$("#trigger").change(function() {
if (this.checked) {
$('#mydiv').prepend(p);
p = null;
} else {
p = $("p").detach();
}
});
});
p {
background: yellow;
margin: 6px 0;
}
p.off {
background: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>detach demo</title>
<link href="style.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="mydiv">
<p>Hello</p>
<p>you?</p>
</div>
Toggle:
<input type="checkbox" name="mycheckbox" id="trigger" checked/>
<script src="script.js"></script>
</body>
</html>
$(function () {
var myCheck = $('input[name=myCheck]'),
content = $('#content');
myCheck.change(function(){
if (myCheck.is(':checked')) {
content.prependTo(document.body);
} else {
content.detach();
}
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="content"><span>Content</span></div>
<label for="myCheck">
<input type="checkbox" name="myCheck" checked="true">
<span>My Check</span>
</label>
</body>
</html>
I don't really know why this isn't working but I'm new to javascript so I'm sure I made a mistake.
I have a button and when clicked I want the div to disappear but when I click on the button nothing happens.
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
};
<div id="welcome-div">
<p>Welcome</p>
</div>
<a href="#" id="begin-button" class="intro-button"/>Begin Tour</a>
You are missing jQuery library in your code snippet.Add <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> to include jQuery library
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
};
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
});
//^....... missing ')'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="welcome-div">
<p>Welcome</p>
</div>
<a href="#" id="begin-button" class="intro-button" />Begin Tour</a>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hide</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
label input[type="file"]
{
display: block;
margin-top: -20px;
opacity: 0;
}
</style>
<script>
$(window).ready(function() {
$(document).delegate('#hide','click',function(){
$('#spanFileName').hide();
});
});
</script>
</head>
<body>
<p id='hide'> Click for hide</p>
<span id='spanFileName'>Hide me</span>
</body>
</html>