I want to clone a div by clicking on ADD link. But when a div gets cloned then a new cloned div ADD link is not behaving like the previous ADD link. I want to achieve this functionality. Please help.
<!doctype html>
<html>
<head>
<title>Javascript prototype</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script type="text/javascript" src="prototyp.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function(){
$(".add_option").click(function(){
console.log("clicked !");
$('<div id="cloned">\n\
<input type="checkbox" >\n\
<input type="text"> \n\
<a href="#" ><span >ADD </span></a> \n\
<span> REMOVE</span>\n\
</div>').clone().appendTo('#cloned');
$('span').addClass('add_option');
});
});
</script>
<div id="cloned">
<input type="checkbox">
<input type="text">
<span class="add_option">ADD</span>
<span>REMOVE</span>
</div>
</body>
</html>
You need to Event delegation for attaching events to dynamically added elements:
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$(document).ready(function(){
$("body").on('click','.add_option',function () {
console.log("clicked !");
$('<div id="cloned">\n\
<input type="checkbox" >\n\
<input type="text"> \n\
<a href="#" ><span >ADD </span></a> \n\
<span> REMOVE</span>\n\
</div>').clone().appendTo('#cloned');
$('span').addClass('add_option');
});
});
NOTE: Also the Ids you give to your elements should be unique, As in your case the same id is passed to every div that you clone!
There are some mistakes:
replace id to class. then, use $('.cloned').
move add_option class name to <span>ADD</span>
when you click a use return false
just use to copy this code $('.cloned:last').after($('.cloned:last').clone());
<!doctype html>
<html>
<head>
<title>Javascript prototype</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script type="text/javascript" src="prototyp.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<script>
$(document).ready(function () {
$(document).on("click", ".add_option", function () {
console.log("clicked !");
$('.cloned:last').after($('.cloned:last').clone());
return false;
});
$(document).on("click", ".remove-option", function () {
$(this).closest(".cloned").remove();
return false;
});
});
</script>
<div class="cloned">
<input type="checkbox">
<input type="text">
<span>ADD</span>
<span>REMOVE</span>
</div>
</body>
</html>
Related
The jquery code to allow a form and button to show entered data as a list is not functioning. The code is also written to delete the text when it is clicked on - unable to check if this is also working. Any suggestions on where the error may be found?
$(document).ready(function(){
$('#button').click(function(){
var toAdd = $('input[name=checkListItem]').val();
$('.list').append("<div class='item'>" + toAdd + "</div>");
});
$('.list').click(function(){
});
});
$(document).on('click', '.item', function(){
$(this).remove();
});
html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- <script src="js_lib/jquery-ui.js"></script>-->
<script src="jquery-3.5.1.min.js"></script>
<title>A Simple Notes List</title>
<h1><span>A Simple Notes List</span></h1>
<div id="canvas" class="container group">
<div id="primaryContent" class="group">
<p> </p>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button" value="button">Add!</div>
<br/>
<div class="list"></div>
<p>Click item on list to remove item from list</p>
</div>
When I click The button it does not show me any output on the console window
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
<script type="text/javascript" src="script.js">
</body>
</html>
->js
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('Click',showNo);
function showNo() {
console.log('I was Clicked');
}
You have a few issues with your code.
Firstly you need to close your <script> tag in your HTML:
<script type="text/javascript" src="script.js"></script>
Secondly, your id shouldn't have spaces in it. You can change it to something like btn-click:
<button type="button" id="btn-click">Click me</button>
And then make sure to target it properly in your Javascript:
var printNumber=document.getElementById('btn-click');
Thirdly, your event name should be lowercase (as Javascript is case-sensitive), so change "Click" to "click"
Lastly, you want to add the click event listener to your button, which is stored in the variable printNumber. At the moment you are adding the event listener to your document and not the button. To add it to your button you can use:
printNumber.addEventListener("click", showNo); // add click event listener to button
See working example below:
var printNumber = document.getElementById('btn-click'); // change id selector
printNumber.addEventListener('click', showNo); // change 'Click' to 'click'
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title>Awesome button</title>
</head>
<body>
<button type="button" id="btn-click">Click me</button> <!-- change id -->
<script type="text/javascript" src="script.js"></script> <!-- close script -->
</body>
</html>
It should be click not Click!
JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
</body>
</html>
You had one typo Click which is supposed to be click.
`printNumber=document.addEventListener('Click',showNo);`
^^^^^^^^
you should add event listener to that particular element not to the complete document.
var printNumber=document.getElementById('Click_me');
printNumber.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click_me">Click me</button>
</body>
</html>
I was asked to develop a web page without a mouse.
The keyboard cursor must be in the input area(example: <input id="input-label" type="text">) immediately when the page is changed.
I tried,
document.querySelector("#input-area").focus();
and
document.querySelector("#input-area").select();
It works with buttons, but does not work in DOMContentLoaded.
document.addEventListener("DOMContentLoaded", function(){
document.querySelector("#input-area").select();
});
How can I solve it?
try this, call it when dom is ready
$(document).ready(function () {
$("#input-area").focus();
});
OR
<input id="input-area" autofocus="autofocus" />
OR
$(function() {
$("#input-area").focus();
});
Try this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#myAnchor').click(function() {
$('#mustfocus').focus();
});
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
How about this one which triggers only during DOM is ready:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#mustfocus').focus();
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
I have multiple divs inside a form tag.
<form id="RegdForm">
#Html.Partial("../Partials/_PatientEdit")
The partial view,
<div id="zafar"> <h3>Zafar</h3> </div>
When I try to hide all the divs its working like below
<script type="text/javascript">
$('Div').hide();
</script>
But when I try to hide specific Div it's not hiding at all.
<script type="text/javascript">
$('#zafar').hide();
</script>
I am using ASP.Net MVC 5 with Razor.
Any help appreciated.
Try this
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="zafar">
<h3>Zafar</h3>
</div>
<div class="well well-sm">
<button class="btn btn-success" type="submit">Save</button>
<button class="btn btn-primary" type="button" data-bind="click: printPatient">Print</button>
<button class="btn btn-danger" type="button" data-bind="click: resetForm">Reset</button>
</div>
<button id="hide">Hide</button>
<button id="hideAll">Hide All</button>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$('#zafar').hide();
});
$("#hideAll").click(function(){
$('Div').hide();
});
});
</script>
</body>
</html>
Here is your answer:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#zafar").hide();
});
</script>
Add your respective function inside this.
$(function() {
$('#zafar').hide();
})
After a long googling I found out one solution to this.
As the div was inside the form tag, the way accesing the div can be done as,
<script type="text/javascript">
$('#RegdForm #zafar').hide();
It helped me to achieve the task.
I have a problem adding bootstrap class to button with a function. I want to add the disable class to #eng.
My code:
<li>
<div class="btnLang">
<form id="formLang1">
<button id="slo" class="btn btn-mini disabled">slo</button>
</form>
<form id="formLang2" onsubmit='return eng_clicked()'>
<button id="eng" class="btn btn-mini">eng</button>
</form>
</div>
</li>
<script type="text/javascript">
function eng_clicked(){
$('#eng').addClass("disabled");
}
</script>
you forgot the script tag
<script type="Text/javascript">
//scripts
</script>
Anyway I have better solution for you using jQuery, just remove "onsubmit='return eng_clicked()'" and and replace the codes below instead of your codes:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$("#formLang2").click(function() {
$('#eng').addClass("disabled");
});
</script>
have you add the script tag?
<script type="text/javascript">
function eng_clicked(){
$('#eng').addClass("disabled");
}
</script>