jQuery .on not quite working to detect clicks? - javascript

I guess I am not doing this right. Why doesn't the .on function work here?
<html>
<head>
</head>
<body>
<button type="button" class="close" data-test="test">TEST BUTTON</button>
<a href="javascript:void(0);" class="close" data-test="test">TEST LINK</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$("document").on('test', '[data-test="test"]', function() { alert("got test!!!"); });
</script>
</body>
</html>


document is a object not a string,
change $("document") to $(document). Fiddle: http://jsfiddle.net/DUn5f/


Change to:
$(document).on('click', '[data-test="test"]', function() {
alert("got test!!!");
});


As this is button is no being added dynamically the easiest solution would be
$(".close").click (function() { alert("got test!!!"); });


try this:
jQuery(document).ready(function($){
$(document).on('click', '[data-test="test"]', function() { alert("got test!!!"); });
});
DEMO: http://jsfiddle.net/uSQg6/
change your html structure to this:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(document).on('click', '[data-test="test"]', function() { alert("got test!!!"); });
});
</script>
</head>
<body>
<button type="button" class="close" data-test="test">TEST BUTTON</button>
<a href="javascript:void(0);" class="close" data-test="test">TEST LINK</button>
</body>
</html>

Related

JS - Get value on click event from dyamically added elements

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>

<a> tag click event won't work

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(...)

how to add a button as html to a div and add click function

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.

JQuery .click event on a tag not triggered

I Have this code:
<script type="text/javascript">
$(document).ready(function () {
$("#NextFrom").click(function () {
alert('hi');
})
});
</script>
<form action="/Book" id="bookform" method="post">
<a class="btn btn-lg btn-success btnNext pull-right" value="next" aria-controls="to" id="NextFrom" href="#">NEXT</a>
</form>
But for some reason the event is not triggered.
What am I doing wrong?
I'm using the following jQuery scripts:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/Scripts/vendor/jquery-1.11.4.ui.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>

semi colon was missing..
$(document).ready(function () {
$("#NextFrom").click(function (event) {
alert('hi');
});
});

I tried your code on my side, and everything seems to work. I think your problem came from the jquery inclusion, check this link to see if the jquery is indeed well included or not :
http://jquery-howto.blogspot.fr/2009/03/check-if-jqueryjs-is-loaded.html

Adding a div dynamically using append()

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>');

Categories