I would like to get value on click event from dynamically added elements but something goes wrong.
My code is:
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#myContainer").append("<div class='remove' value='myValue'>click to display value</div>");
});
$(document).on("click", ".remove" , function() {
alert($(this).val());
});
});
</script>
</head>
<body>
<button>Add new list item</button>
<div id="myContainer">
</div>
</body>
</html>
When I am clicking on the created dynamically div there is empty alert insted of myValue.
What should I change?
Try
$(document).on("click", ".remove" , function() {
alert($(this).attr('value'));
});
Instead of
$(document).on("click", ".remove" , function() {
alert($(this).val());
});
this should work for you. ↓↓
$(document).ready(function(){
$("button").click(function(){
$("#myContainer").append("<div class='remove' value='myValue'>click to display value</div>");
});
$(document).on("click", ".remove" , function() {
alert($(this).attr('value'));
});
});
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<button>Add new list item</button>
<div id="myContainer"> </div>
</body>
</html>
Related
I tried some methods in old questions but it is not working in chrome.
Can please any one suggest me the solution.i'm using php for validation.
if i click submit button twice it through an error so restrict the issue i disable the submit button but it not working in chrome.
<script>
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
jQuery('#submit_button').attr('disabled','disabled');
});
});
</script>
You could use prop jquery method, or just set the disabled attribute to true.
$(document).ready(function(){
$('#submit').on('click', function(e){
//$(this).prop('disabled', true);
this.disabled = true;
})
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="submit">submit</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
It could be that there are multiple submit buttons on the page. You can try using this code.
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
// It is best practice to use `true` instead of
// any true-y kind of value like non-empty string.
jQuery(this).attr('disabled', true);
});
});
There are different ideas were given but the code seems working properly. Please make sure you imported the jQuery library.
The following code is the tested code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('#button').click(function () {
jQuery('#button').attr('disabled','disabled');
});
});
</script>
</head>
<body>
<input type="submit" id="button" value="If you click on me, I will be disabled."/>
</body>
</html>
Try, using the prop of element and making the attribute true, using
jQuery('selector').prop('disabled',true);
<script>
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
jQuery('#submit_button').prop('disabled',true);
});
});
</script>
how i would add disabled:
<script>
$(document).ready(function(){
$('button').click(function () {
$('<input type="button id="submit_button" disabled>').insertBefore(this);
$(this).remove();
});
});
</script>
how i would change the button back to normal:
<script>
$(document).ready(function(){
$('button').click(function () {
$('<input type="button id="submit_button" >').insertBefore(this);
$(this).remove();
});
});
</script>
you can use $('selector').prop('disabled',true);
I have the following html(+razor) :
<div id = "years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year
#DateTime.Now.AddYears(-1).Year
#DateTime.Now.AddYears(-2).Year
</div>
I simply want to have use these as buttons and something to happen on click. Therefore I have the following jquery, which won't work :
$(".btn a").click(function () {
console.log('click');
var txt = $(this).text();
console.log(txt);
alert(txt);
});
I simply want to have the value inbetween the on click.
Right now, when I click one of the buttons, nothing happens. Neither I get 'click' written on the console, nor i get an alert with the text in the tag. Can someone help make this work?
$(".btn a") is looking for <a> tags that are descendents of .btn class. That is not what you have
Just use the inner listener and get rid of the outer one. It is not a good practice to create event listeners inside other event handlers unless you really have a good reason and know what you are doing
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year
<br>
<br>
#DateTime.Now.AddYears(-1).Year
<br>
<br>
#DateTime.Now.AddYears(-2).Year
</div>
<script>
$("#years a").click(function(e) {
console.log(this);
e.preventDefault();
alert("click");
});
</script>
</body>
</html>
You can try this code
Example #1:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id = "years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year<br><br>
#DateTime.Now.AddYears(-1).Year<br><br>
#DateTime.Now.AddYears(-2).Year
</div>
<script>
$("a.btn").click(function(e){
e.preventDefault();
console.log(this);
alert("click");
});
</script>
</body>
</html>
Example #2:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id = "years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year<br><br>
#DateTime.Now.AddYears(-1).Year<br><br>
#DateTime.Now.AddYears(-2).Year
</div>
<script>
// without a
$(".btn").click(function(e){
e.preventDefault();
console.log(this);
alert("click");
});
</script>
</body>
</html>
Example #3:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id = "years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year<br><br>
#DateTime.Now.AddYears(-1).Year<br><br>
#DateTime.Now.AddYears(-2).Year
</div>
<script>
$("#years a").click(function(e){
console.log(this);
e.preventDefault();
alert("click");
});
</script>
</body>
</html>
Your enclosing div does not have a class of .btn so your jquery selector won't find anything. Try:
$(".btn-group a").click(...)
In the following code the button "alt2" shows up but does not alert "hi"
Is this the proper way to add a button?
<body>
<div id="test"></div><br>
<button id="add">add</button><br>
<button id='alt'>alt1</button>
<script type="text/javascript" >
$(function(){
$("#add").click(function(){
$("#test").html("<button id='alt2'>alt2</button>");
});
$("#alt").click(function(){
alert("hi");
});
});
</script>
on("click")... for the second alt2 is missing. also i would suggest you use on("click")... instead of .("click") . .("click") this one may miss to fire the second time
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="test"></div><br>
<button id="add">add</button><br>
<button id='alt'>alt1</button>
<script type="text/javascript" >
$(function(){
$(document).on("click", "#add", function(e) {
e.preventDefault();
$("#test").html("<button id='alt2'>alt2</button>");
});
$(document).on("click", "#alt", function(e) {
e.preventDefault();
alert("hi 1");
});
$(document).on("click", "#alt2", function(e) {
e.preventDefault();
alert("hi 2");
});
});
</script>
</body>
$("#add").click(function() {
$("#test").html("<button id='alt2'>alt2</button>");
});
$("#alt").click(function() {
alert("hi");
});
$(document).on('click',"#alt2",function() { // use .on()
alert("hi 2");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test"></div>
<br>
<button id="add">add</button>
<br>
<button id='alt'>alt1</button>
Use .on() for dynamically added elements.
Description: Attach an event handler function for one or more events to the selected elements.
Consider the HTML :
<html>
<head>
Something...
</head>
<body>
<script>
$('#btnviewdetails').text('Save').button("refresh");
</script>
<button id='btnviewdetails' type='button'>SET</button>
</body>
</html>
When I hit the button , the JS code is not invoked . What am I doing wrong ?
Thanks
You need to bind an event handler on the button. The function will be invoked when the button is pressed.
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
Complete code :
<html>
<head>
<script src="jquery-2.1.0.min.js"></script>
Something...
</head>
<body>
<button id='btnviewdetails' type='button'>SET</button>
<script>
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
</script>
</body>
</html>
Kindly notify me I am explaining it well or not. I'm using .append() to repeat a div inside a page.
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append("<div class='Box'>I'm new box by prepend</div>");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<button id="num">Click Me</button>
/body>
</html>
This works good when I add a div repeatedly. But I like to call it externally like the below code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append($('#Box'));
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
/body>
</html>
Why is this not working?
Try using clone():
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$(".Box:first").clone().appendTo("#form");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
</body>
</html>
You have to create a new element before adding it.
Demo
try this
$(document).ready(function(){
$("#num").click(function () {
$(".Box").first().clone().appendTo("#form");
});
});
Try something like this:-
$("#parent_div").append('<div id="created_div"></div>');