I just started to learn JavaScript/jQuery, and I made a little test website to practice coding.
In one of the tests I made, there is a list that says Milk and Eggs. There is an input field and a button, which you can type something, click the button, and add it to the list. I then added an option where if you click on one of the list items, it removes it. This works, but only on the preset Milk and Eggs items, not any items that you add yourself.
I think it's because the code wasn't loaded for the newly added items, but I'm not sure. Can someone help?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Practice 3</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<div class="Title" align="center">
<h1>Hello</h1>
<p>This website will use JavaScript to create interactive elements.</p>
</div>
<div class="1">
<h3>Test 1</h3>
<ul id="list">
<li>Milk</li>
<li>Eggs</li>
</ul>
<input id="textbox">
<button id="add">Add to list</button>
</div>
<script>
$('#add').click(function() {
var listvalue = $('#textbox').val();
$("#textbox").val("");
$('ul').append('<li>' + listvalue + '</li>');
});
$('#textbox').keypress(function(event) {
if(event.which === 13) {
var listvalue = $('#textbox').val();
$('#textbox').val("");
$('ul').append('<li>' + listvalue + '</li>');
}
});
$('li').click(function(e) {
$(e.target).remove();
});
</script>
</body>
</html>
Use event delegation
$('#list').on('click', 'li', function(e) {
$(this).remove();
});
Example
You can use on to bind the click even to the document, then specify a selector to specify that it should only trigger for li elements:
$(document).on('click', 'li', function (e) {
$(this).remove();
});
This will still work with newly-added li elements because the event-handler itself is bound to the document itself, not the individual elements. It simply performs a runtime check to ensure that the dispatched event matches the provided selector.
Answered by Gone Coding on stackoverflow:
https://stackoverflow.com/a/34857252/7074256
And here is example how to do it with jquery:
function moveItems(origin, dest) {
$(origin).closest("li").appendTo(dest);
}
$(document).on('click', '.add', function () {
moveItems(this, '#listTwo');
});
$(document).on('click', '.remove', function () {
moveItems(this, '#listOne');
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/r7j3odyy/4/
Related
I've a landingpage with dynamic html tags.
The Problem is, that i can't select directly the tag. Its a link.
the following code is the construct:
<div id="testid"><div><div>Button 1<div><div><div>
Every time someone clicks on the link (a-tag) I want to fire an event like the following code:
Button 1
the question: what is the Javascript code to add the onclick="dataLayer.push({'event': 'button1-click'}) attribute to the a tag.
I tried the following code:
var d = document.getElementById("testid").firstchild;
d.setAttribute("onclick", "dataLayer.push({'event': 'button1-click'})");
but it seems to the code is incorrect. The a tag is also not the first child; there are 2 divs between :(
Use querySelector and addEventListener:
document.addEventListener('DOMContentLoaded', function () {
var dataLayer = [];
var d = document.querySelector("#testid a[name=button1]");
d.addEventListener("click", function () {
dataLayer.push({ 'event': 'button1-click' });
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="testid">
<div>
<div>
Button 1
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js">
</script>
</body>
</html>
There's a few things you were missing from your JS.
Using a more specific selector (#testid a[name=button1] vs. the firstchild of #testid, which was not accurate).
Wrapping all the code in a DOMContentLoaded listener. JS that depends on elements on a page needs to wait for the page to build first, that's what DOMContentLoaded is.
Check out my solution. Hope this helps.
var d = document.querySelector("#testid a");
var dataLayer = []
d.onclick = function () {
dataLayer.push({'event': 'button1-click'})
console.log(dataLayer.length)
}
<div id="testid"><div><div>Button 1<div><div><div>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I have a button with empty id attribute. I want to get <a> by id that added dynamically to it.
note : I don't want to use createElement() to add <a>.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a id="" class="btn" href="#"><button>Green</button></a><br><br>
<a id="changeId" href="#"><button>Change Id!</button></a>
</body>
</html>
JS
$(document).ready(function() {
$("a#green").on("click", function(){
$("body").css("background-color","green");
});
$("a#changeId").on("click", function(){
$("a.btn").attr("id","green");
});
});
Here is my code on jsFiddle
Since id is being created through another event, you can use event-delegation approach:
$("body").on("click","a#green", function(){
$(document).ready(function() {
$("body").on("click","a#green", function(){
$("body").css("background-color","green");
});
$("a#changeId").on("click", function(){
$("a.btn").attr("id","green");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<a id="" class="btn" href="#"><button>Green</button></a><br><br>
<a id="changeId" href="#"><button>Change Id!</button></a>
</body>
Okay:
$(document).ready(function() {
$("a#changeId").on("click", function(){
$("a.btn").attr("id","green");
$("a#green").on("click", function(){
$("body").css("background-color","green");
});
});
});
$(document).on("click", '#green', function(){}); is what you need. Because $("a#green") cannot be found because it is dynamically added to DOM. Or you can do some thing like $('body').on("click", '#green', function(){}); i.e. you need to take reference of static element. It can be any parent element of #green that is static.
$(document).ready(function() {
$(document).on("click", '#green', function(){
$("body").css("background-color","green");
});
$("a#changeId").on("click", function(){
$("a.btn").attr("id","green");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="" class="btn" href="#"><button>Green</button></a><br><br>
<a id="changeId" href="#"><button>Change Id!</button></a>
I'm trying to make a simple ToDo list in JQuery and I run into a problem.
I made function 'deleteListItem' and I use it to delete my lists items with:
$(this).parent().remove();
, and then I wanted to add fadeOut effect to my list and so I tried:
$(this).fadeOut(1000, function(){
$(this).parent().remove();
})
, but this fadesOut just my delete button so then I tried
$(this).parent().fadeOut(1000, function(){
$(this).parent().remove();
})
and this fades all of my 'ul' instead of just 'li' element.
Here is mine JSBIN so you better understand what I'm doing: http://jsbin.com/ciyufi/edit?html,js,output
Inside the callback handler, this refers to the <li>.
$(this).parent().fadeOut(1000, function(){
$(this).remove();
})
// This is where I put my functions
// This function adds items on our list
function addListItem() {
var text=$('#newText').val(); // val returns any text thats inside input
$('#todoList').append('<li><input type="checkbox" class="done">'+ text +'<button class="delete">Delete</button></li>');
$('#newText').val(''); // this is added so that our input deletes previous text when add is clicked
};
// This function deletes items on our list
function deleteListItem() {
// In order to delete entire list item we have to use parent method > without parent method we would only delete our delete button
$(this).parent().fadeOut(1000, function(){
$(this).closest("li").remove();
})
};
// This function adds checked remark on our item list
function itemDone() {
// First we check if our element has textDecoration="line-through"
// If it has it second line deletes it
// And our else statement allows as to add it again
if ($(this).parent().css('textDecoration') == 'line-through') {
$(this).parent().css('textDecoration', 'none');
} else {
$(this).parent().css('textDecoration', 'line-through');
}
}
$ (document).ready(function(){
$('#add').on('click', addListItem); // This is for button to add text
// This part enables us to add text on pressing enter key
$( "#newText" ).keypress(function( event ) {
if ( event.which == 13) {
addListItem();
}
});
// $('.delete').on('click', deleteListItem);
// $('.done').on('click', itemDone);
// Lines above don't work because we are adding elements after page loads
// In above lines browser didn't bind functions to our new elements because it didn't see them at the time
// In order to make it work we add document selector > its not the best solution but i'm not good enough for better
// We don't need to do it for #add because its already on page
$(document).on('click', '.delete', deleteListItem);
$(document).on('click', '.done', itemDone);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>ToDo Lista</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="container">
<h1>ToDo List</h1>
<ul id="todoList">
<li><input type="checkbox" class="done"> Clean House <button class="delete">Delete</button></li>
<li><input type="checkbox" class="done">Buy Milk <button class="delete">Delete</button></li>
<input id="newText" type="text" placeholder="Write Your Task"><button id="add">Add</button>
</ul>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I prefer to use closest. closest Just change 'deleteListItem' function to remove closest li item on delete.
function deleteListItem() {
// In order to delete entire list item we have to use parent method > without parent method we would only delete our delete button
$(this).parent().fadeOut(1000, function(){
$(this).closest("li").remove();
})
};
Please bear with me because I'm student. My instructor had us watch 5 YouTube videos and now expects us to program using JQuery instead of standard JavaScript. All I want to do is swap an element with an element from another file.
Here's my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testing JQuery</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<h1 id="header">Testing JQuery</h1>
<p id ="dummy">Lorem Ipsum </p>
<script src="changes.js"></script>
<form name="input" action="changes.js">
<input type="button" value="Change the Header">
</form>
</body>
</html>
Here is my JavaScript/JQuery code:
$(document).ready(function() {
$('input').click(function() {
var url = $(this).attr('form');
$('#header').load( greeting.html + '#ajax h1');
return false;
});
});
The third file is called greeting.html and this is all it contains:
<h1 id="ajax">Hello from jQuery with AJAX</h1>
$('#header').load( 'greeting.html #ajax' );
That's all you need. Get rid of all the other stuff.
You dont need to declare url and you dont need to return false.
To replace the element, load() won't work as it loads the new H1 inside the old H1, it does not replace it, so you have to use $.get and do it yourself :
$(document).ready(function() {
$('input').on('click', function() {
$.get({
url : 'greeting.html'
}).done(function(data) {
var h1 = $('<div />').append(data).find('h1#ajax');
$('#header').replaceWith(h1);
});
return false;
});
});
Why is the click event on a hyperlink not fired?
#Html.ActionLink(
"Show the privacy policy",
"PrivacyPolicy",
null,
new { id = "privacyLink" })
<div id="privacy"></div>
<script>
$(document).ready(function () {
// $('div').addClass('fooh');
$('div#myDiv').click(function () {
alert('div was clicked');
});
$('a#privacyLink').click(function () {
alert('a');
});
});
</script>
The myDiv click event is fired as expected but the privacyLink's event is not fired, that is the alert is not shown.
Generated HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="/Scripts/AjaxDemo.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
[ Log On ]
</div>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
</ul>
</nav>
</header>
<section id="main">
<h2>Welcome to ASP.NET MVC!</h2>
<p>
To learn more about ASP.NET MVC visit http://asp.net/mvc.
</p>
<div id="myDiv">
<p>
Me Gusta
</p>
</div>
Show the privacy policy
<div id="privacy"></div>
<script>
$(document).ready(function () {
// $('div').addClass('fooh');
$('div#myDiv').click(function () {
alert('div was clicked');
});
$('a#privacyLink').click(function (e) {
e.preventDefault();
alert('a');
$(location).src = $(this).attr('href');
});
});
</script>
</section>
<footer>
</footer>
</div>
</body>
</html>
Other than the fact that you should return false from the click callback of your anchor to prevent the browser from redirecting away I do not see anything wrong with it:
$('a#privacyLink').click(function () {
alert('a');
return false;
});
Also make sure that you do not have other elements with id="privacyLink" anywhere in your DOM because ids must be unique.
Also check your js console in the browser to ensure that you do not have some javascript errors preventing the .click handler to be attached properly.
Try with event preventDefault() method.
$('a#privacyLink').click(function (e) {
e.preventDefault();
alert('a');
$(location).attr('href', $(this).attr('href'));
});
Use this :
Since your anchor is not formed , your binding is not working. Use http://api.jquery.com/on/
$("a#privacyLink").on("click", function(event){
alert('a');
});
This is the jsfiddle to simulate your condition (Dynamic generation of HTML elements)
http://jsfiddle.net/nhNpw/6/