http://jsfiddle.net/jzhang172/s83yt1L6/
I'm having trouble getting the button to work. It should work like here on the bootstrap site:
http://getbootstrap.com/javascript/#buttons
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
Loading state
</button>
<script>
$(function(){
$('#myButton').on('click', function () {
var $btn = $(this).button('loading')
// business logic...
$btn.button('reset')
});
});
</script>
you reset the button immediately after it changed to 'loading' so you can't see it changed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
Loading state
</button>
<script>
$(function(){
$('#myButton').on('click', function () {
var $btn = $(this).button('loading');
setTimeout(function(){$btn.button('reset');}, 1000);
// business logic...
});
});
</script>
Related
How can I use the hoverIntent jQuery Plugin with Bootstrap Tooltips (to show the tooltips only when the mouse is stopped on the button not on passing over)?
$(function() {
$(".btn").hoverIntent(
$('[data-toggle="tooltip"]').tooltip()
);
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.9.0/jquery.hoverIntent.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
</div>
Modified based on a post by shalan.com, try this:
var config = {
over : function(){ $(this).fadeIn('fast'); }, //appear gradually
out : function(){ $(this).fadeOut('fast'); }, //disappear gradually
timeout : 100 };
$("button[data_toggle='tooltip']").hoverIntent( config );
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.
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 ...)
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>
I tried the following code in JSfiddle - it works, however, this does not work on my own local computer.
What could be the reason?
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js'></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary" value = "loading state">
<script>
$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
});
</script>
script tag does not have href attribute. It contains src attribute.
so
<script src='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js'> </script>
will work.
You have to write your jQuery script inside doucment.ready function also you have loaded jQuery library after booststrap.js, this should be loaded before
try this :
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js'></script>
<input type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary" value = "loading state">
<script>
$(document).ready(function()
{
$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
});
});
</script>