How to detect which button is clicked in Jquery - javascript

i have code like this :
#foreach(....)
<div class="col-md-3">
<div class="thumbnail">
<!-- content --!>
<button class="btn btn-success btnEdit">Edit</button>
</div>
</div>
#endforeach
and i tried like this in my jquery
$(".btnEdit").on("click", function(){
alert("clicked");
});
but if i clicked the button, the alert never showed up, how to solve my case??
*note : sorry if question like this was discuss before
thanks

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
<div class="col-md-3">
<div class="thumbnail">
<button class="btn btn-success btnEdit">Edit</button>
</div>
</div>
</body>
<script>
$(".btnEdit").on("click", function(){
alert("clicked");
});
</script>
The alert works fine.Have you added jquery plugins to your code?

Have you included jquery? Try to wrap it using $(document).ready(function(){})
$(document).ready(function(){
$(".btnEdit").on("click", function(){
alert("clicked");
});
});

Answer for headline question:
How to detect which button is clicked in jQuery
<tr><td>...<button class="btn btn-success btnEdit">Edit</button>...</td></tr>
<tr><td>...<button class="btn btn-success btnEdit">Edit</button>...</td></tr>
<tr><td>...<button class="btn btn-success btnEdit">Edit</button>...</td></tr>
$(document).ready(function(){
$(".btnEdit").on("click", function(){
var $button = $(this);
});
});
Can be used for handling listed parts (rows ...)

Related

Button loader using bootstrap

I am trying to replicate this codepen example
https://codepen.io/jmalatia/pen/eYLzBg?editors=1111
However, it doesn't work in my Visual Studio Code as in the site. I have included all the css and js files spicified there but I can't see anything else more than the button. I can't display the loader animation. Am I missing anything? I included these sources as indicated in the codepen example. I am not sure if I am missing any library, maybe.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="script.js"></script>
Maybe they are not in the right order. Please, I need some help figuring this out.
$('.btn').on('click', function() {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
$this.button('reset');
}, 8000);
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div style="margin:3em;">
<button type="button" class="btn btn-primary btn-lg " id="load1" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button>
<br>
<br>
<button type="button" class="btn btn-primary btn-lg" id="load2" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Did you link all the assets currently? I have checked the code it's worked perfectly on my side. right now I don't have your code to check where the problem is. make sure all CSS files are linked in a head tag. and script files are before the body stage is over. check browser console, if there is an error in the browser console please share a screenshot. thank you
Try running this script at the end of the Js links.
<script>
$('.btn').on('click', function() {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
$this.button('reset');
}, 8000);
});
</script>

Remove disabled class onclick

I'm using jQuery function to add disabled class onclick, it is working fine. But I want to remove the class by clicking on other button, that is not working can anyone help me with this? This is code...
//Delay add disabled class on cart
$('.fa-shopping-cart').on('click',function(){
var $this = $(this).addClass('finsihed');
window.setTimeout(function(){
$this.addClass('disabled-button');
}, 1500); //<-- Delay in milliseconds
});
function reEnableBtn(prodId) {
alert(prodId);
// var $this = $(this).removeClass('finsihed');
// window.setTimeout(function(){
// $this.removeClass('disabled-button');
// }, 1500); //<-- Delay in milliseconds
$('.festi-cart-remove-product').removeClass('disabled-button');
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
Re-enable button
I hope you guys understand my question..
In the function reEnableBtn, $('.festi-cart-remove-product') doesn't exist.
Change :
$('.festi-cart-remove-product').removeClass('disabled-button');
To :
$('.fa-shopping-cart').removeClass('disabled-button');
As I came to understand your question, please check given link or snippet if this is what you want...
var $this = '#cart';
$(document).on('click','#blockr,'+$this,function(){
$($this).addClass('disabled');
})
$(document).on('click','#openr',function(){
$('#cart').removeClass('disabled');
})
.disabled{
color:#333;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="font-awesome#4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<button class="btn btn-default" id="cart">
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
</button>
<br /> <br />
<a class="btn btn-default" id="blockr" href="#!">Disabled button</a>
<a class="btn btn-default" id="openr" href="#!">Re-enable button</a>
</body>
</html>
link: http://plnkr.co/edit/3m9mKo8EQkGnjpqs54U6?p=preview
or you can comment if you want something modified in it. Hope it helps you.

Jquery .On('click') is being uncooperative [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I have a delete button that is generated inside of a div. When clicked I want it to delete the itself and the div and everything inside of it.
$('#geography-save').click(function () {
$('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>');
});
$(document).ready(function(){
$('.remove-save').on('click', function () {
alert('test');
$(this).parent('div').remove();
});
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button>
<div class="selected-criteria"></div>
Just use jQuery's on() method like this:
$('body').on('click', '.remove-save', function () { ... });
You should bind the event to a parent which already exists if the content is generated dynamically inside the DOM structure!
$('#geography-save').click(function () {
$('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>');
});
$(document).ready(function(){
$('body').on('click', '.remove-save', function () {
alert('test');
$(this).parent('div').remove();
});
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button>
<div class="selected-criteria"></div>
As your button is dynamically generated, you can access it only based on a static element - so you can use this:
$('body').on('click','.remove-save', function () {
See demo below:
$('#geography-save').click(function() {
$('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>');
});
$(document).ready(function() {
$('body').on('click', '.remove-save', function() {
$(this).parent('div').remove();
});
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button>
<div class="selected-criteria"></div>

How to respond to "shown.bs.collapse" event?

I search on the web, but unfortunately, nothing works for me.
I tried many different ways to respond to "shown.bs.collapse" event, but it never fires.
I tried by replacing ".collapse" by "#divi", or by changing the place of the event binding from the bottom to the top, but nothing did it.
Here is my current code :
<button data-toggle="collapse" data-target="#divi">Click</button>
<div id="divi" class="collapse">
Masqued
</div>
<script>
$(".collapse").on("shown.bs.collapse", function() {
alert("test");
});
</script>
I just wrote a new simple html file thanks to the answer of Jaganathan Bantheswaran :
<script>
$(".collapse").on("shown.bs.collapse", function() {
alert("test");
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button data-toggle="collapse" data-target="#divi">Click</button>
<div id="divi" class="collapse">
Masqued
</div>
And it doesn't works too.
Same code works fine with the bootstrap version 3.3.7. Which version of bootstrap you are in?
Update 1
In your code sample, The event linking for shown.bs.collapse has to go down to the page. Because the none of the libs would be loaded at that time of event registration.
$(".collapse").on("shown.bs.collapse", function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button data-toggle="collapse" data-target="#divi">Click</button>
<div id="divi" class="collapse">
Masqued
</div>

Assign a function to a single letter within jQuery

I need to make the letter "x" clickable and ad a function that removes the text that this line below creates.
$("#user").prepend("<li>Hello! <span id='clickable'>x</span></li>");
$(document).ready(function() {
$("#hello").click(function() {
$("#user").prepend("<li>Hello! <span id='clickable'>x</span></li>");
$("#webpage").prepend("<li>Why hello there!!</li>");
$("#user").children("li").first().click(function(){
$(this).remove();
});
$("#webpage").children("li").first().click(function(){
$(this).remove();
});
});
$("#goodbye").click(function() {
$("#user").prepend("<li>Goodbye!</li>");
$("#webpage").prepend("<li>Goodbye, dear user!</li>");
$("#user").children("li").first().click(function(){
$(this).remove();
});
$("#webpage").children("li").first().click(function(){
$(this).remove();
});
});
$("#stop").click(function() {
$("#user").prepend("<li>Stop copying me!</li>");
$("#webpage").prepend("<li>Sorry, i meant no offense.</li>");
$("#user").children("li").first().click(function(){
$(this).remove();
});
$("#webpage").children("li").first().click(function(){
$(this).remove();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="CSS/bootstrap.css" rel="stylesheet" type="text/css">
<link href="CSS/styles.css" rel="stylesheet" type="text/css">
<script src="jQuery/jQuery.js"></script>
<script src="talk.js"></script>
<title>Talk to the web page</title>
</head>
<body>
<div class="container">
<h1>Talk to the web page</h1>
<p>Click a button to say something to the web page. See what it says back!</p>
<button class="btn btn-primary" id="hello">Say "hello"</button>
<button class="btn btn-inverse" id="goodbye">Say "goodbye"</button>
<button class="btn btn-danger" id="stop">Say "stop copying me!"</button>
<div class="row">
<div class="col-md-6">
<h2>You said:</h2>
<ul class="unstyled" id="user">
</ul>
</div>
<div class="col-md-6">
<h2>The web page said back:</h2>
<ul class="unstyled" id="webpage">
</ul>
</div>
</div>
</div>
</body>
</html>
a clickable letter that removes the text this line above creates.
Create one click event that uses .on (since dynamic content and what not) and remove the parent li element:
$("#user").on("click", "span.clickable", function() {
$(this).parent("li").remove();
});
Also use the class clickable and not the ID (I assume you have more than 1);

Categories