if we push Html to the Dom , it will be display there but its not updated. is there any update function to jQuery ?
$(function(){
$('#add').on('click', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$('.remove').on('click', function(){
alert('not working');
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
Anchor link not working when we push to the DOM , every answers must be appreciated ?
You should use the $(document).on('click', '.remove' instead:
$(function(){
$(document).on('click', '#add', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$(document).on('click', '.remove', function(){
alert('not working');
});
});
This way jQuery listens for click events on the document, and if the target element is .remove (for example) - the function will be triggered. It doesn't matter if the elements are added dynamically - the click event is always on the document, and jQuery will check the target element (and act accordingly).
Here is the update to your snippet:
$(function(){
$(document).on('click', '#add', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$(document).on('click', '.remove', function(){
alert('not working');
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
You are attaching click event to element that does not exist in document.
You can use jQuery() to attach the event to the element when the element is dynamically created.
$(function() {
$("#add").on("click", function() {
var div = $("<div>", {
"class": "data",
html: $("<input>", {
type: "text",
value: "enter"
}),
append: $("<a>", {
href: "#",
"class": "remove",
html: "Remove",
on: {
click: function() {
alert("not working");
}
}
})
})
$(".outer").append(div);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div>
<!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
As per this question, I solved it by changing the line
$('.remove').on('click', function(){
to $('body').on('click','.remove', function(){
UPDATE: $('.outer').on('click','.remove', function(){
jQuery event handler .on() not working
$(function(){
$('#add').on('click', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$('.outer').on('click','a.remove', function(){
alert('not working');
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
The problem is that $('.remove') is not defined at the time you attempt to assign an Event to it. Change
$(function(){
$('#add').on('click', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$('.remove').on('click', function(){
alert('not working');;
});
});
to
$(function(){
$('#add').click(function(){
$('.outer').append("<div class='data'><input type='text' value='enter' /><a href='#' class='remove'>Remove</a></div>");
$('.remove').on('click', function(){
$(this).parent().remove();
});
});
});
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<meta charset='utf-8'>
<title>Untitled Document</title>
</head>
<body>
<div class='outer'>
<input type='button' value='Click me' id='add' />
</div>
</body>
$(function(){
$('#add').on('click', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$('.remove').on('click', function(){
alert('not working');
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
Related
i have this problem, I would like to load a text inside a div with .innerHTML but after the event click the text inside the div diseappers:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Anagrafica</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>My Document</h1>
<input type="submit" value="submit" id="submit">
<div id="myDiv"></div>
<script src="js/app.js"></script>
</body>
</html>
app.js
window.addEventListener('load',function(){
document.getElementById('submit').addEventListener('click',function({
document.getElementById('myDiv').innerHTML= 'hello';
});
You have syntax error , )} missing .
addEventListener('click', function({
Looks like callback but you need just function(){} to attach.
window.addEventListener('load',function(){
document.getElementById('submit').addEventListener('click', function(){
document.getElementById('myDiv').innerHTML= 'hello';
}, false);
}, false);
<input type="submit" value="submit" id="submit">
<br/>
<br/>
<div id="myDiv" style="background-color:black;color:lime;width:300px" > ... </div>
On html
<button type='submit'></button>
On js
var Button = document.querySelector("button");
Button.addEventListener("click", onClickButton, false);
function onClickButton(){
// to do something here
}
Is there an other way to link to an element on the same page without using anchor URLs?
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Alternative to anchor URL</title>
</head>
<body>
<input type="button" value="Go there »" />
<div style="height:1280px;"></div>
<div id="goHere" style="width:360px;height:240px;background-color:#61b2cc"></div>
</body>
</html>
There is! Look at the code below:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Alternative to anchor URL</title>
<script type="text/javascript">
function scrollWindow() {
{
var top = document.getElementById('goHere').offsetTop;
window.scrollTo(0, top);
}
}
scrollWindow();
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="Go there »" />
<div style="height:1280px;"></div>
<div id="goHere" style="width:360px;height:240px;background-color:#61b2cc"></div>
</body>
</html>
With jQuery:
$("button").click(function(){
window.scrollTo($("#goHere").offset().top);
});
I am wondering why javascript alerts doesn't popup:
asp.asp file:
<html>
<head>
<meta charset="utf-8">
<title>AAA</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script class="code" language="javascript" type="text/javascript">
$(document).ready(function(){
$( "#btn-statistika" ).click({
alert('ok');
});
$( "#btn-lokality" ).click({
alert('ok');
});
});
</script>
</head>
<body>
<button class='ui-state-default' id='btn-statistika' style='' >Statistika</button>
<button class='ui-state-default' id='btn-lokality' style='' >Lokality</button>
</body>
</html>
Another asp files are working, I don't know why this cannot work...
You need to pass a function as param to click() call
$(document).ready(function () {
$("#btn-statistika").click(function () {
alert('ok');
});
$("#btn-lokality").click(function () {
alert('ok');
});
});
Here is the updated code
<html>
<head>
<meta charset="utf-8">
<title>AAA</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script class="code" language="javascript" type="text/javascript">
$(document).ready(function(){
$( "#btn-statistika" ).click(function(){
alert('ok');
});
$( "#btn-lokality" ).click(function(){
alert('ok');
});
});
</script>
</head>
<body>
<button class='ui-state-default' id='btn-statistika' style='' >Statistika</button>
<button class='ui-state-default' id='btn-lokality' style='' >Lokality</button>
</body>
</html>
Note: You need to pass a function() in click({}); event.
I'm trying to disable a submit button when a file is not selected following a working solution online. Is it something to do with the script type?
This is the example I followed: disable submit button until file selected for upload
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
$(document).ready(
function(){
$('input:submit').attr('disabled',true);
$('input:file').change(
function(){
if ($(this).val()){
$('input:submit').removeAttr('disabled');
}
else {
$('input:submit').attr('disabled',true);
}
});
});
</script>
</head>
<body>
<form action="#" method="post">
<input type="file" name="fileInput" id="fileInput" />
<input type="submit" value="submit" disabled />
</form>
</body>
</html>
Try with Jquery declared because the Jquery is not included:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
$(document).ready(
function(){
$('input:submit').attr('disabled',true);
$('input:file').change(
function(){
if ($(this).val()){
$('input:submit').removeAttr('disabled');
}
else {
$('input:submit').attr('disabled',true);
}
});
});
</script>
</head>
<body>
<form action="#" method="post">
<input type="file" name="fileInput" id="fileInput" />
<input type="submit" value="submit" disabled />
</form>
</body>
</html>
Include the jQuery library in the <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
i am using following code using dojo to have tooltipdialog ,, by using this code the dialog box is visible below the textbox , but i want to see on above to textbox ..
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script language="JavaScript" src="dojo/dojoroot/dojo/dojo.js" type="text/javascript">
</script>
<script language="JavaScript" src="dojo/dojoroot/dijit/TooltipDialog.js" type="text/javascript" >
</script>
<link rel="stylesheet" href="dojo/dojoroot/dijit/themes/claro/claro.css" />
<script>
dojo.require("dijit.TooltipDialog");
dojo.ready(function(){
var myTooltipDialog = new dijit.TooltipDialog({
id: 'myTooltipDialog',
style: "width: 100px;",
content: "<p>Nitin.",
onMouseLeave: function(){
dijit.popup.close(myTooltipDialog);
}
});
dojo.connect(dojo.byId('thenode'), 'onmousedown', function(){ dijit.popup.open({popup: myTooltipDialog, around: dojo.byId('thenode')}) ;});
});
</script>
</head>
<body class="claro">
<br/>
<br/>
<input type="text" id="thenode"/>
</body>
</html>
please give me some solution ..
specify 'orient' property in dijit.popup.open function's argument object.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="./dojo-release-1.7.3-src/dojo/dojo.js"></script>
<link rel="stylesheet" href="./dojo-release-1.7.3-src/dijit/themes/claro/claro.css" />
<script>
require([ "dojo/ready", "dijit/TooltipDialog" ], function(ready, TooltopDialog) {
ready(function(){
var myTooltipDialog = new TooltopDialog({
id : 'myTooltipDialog',
style : "width: 100px;",
content : "<p>Nitin.</p>",
onMouseLeave : function() {
dijit.popup.close(myTooltipDialog);
}
});
dojo.connect(dojo.byId('thenode'), 'onmousedown', function() {
dijit.popup.open({
popup : myTooltipDialog,
around : dojo.byId('thenode'),
orient: ['above']
});
});
});
});
</script>
</head>
<body class="claro">
<br />
<br />
<br />
<br />
<input type="text" id="thenode" />
<br />
<br />
<br />
<br />
</body>
</html>
dojo/dijit/popup.js:252 in Dojo 1.7.3 release.
orient = args.orient || ["below", "below-alt", "above", "above-alt"],