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>
Related
How can I change/update the text and font icon of a button on click event properly?
$(".btn-warning").click(function() {
$(this).toggle(function() {
$('.btn-warning').text("Remove Filter <i class='fa fa-filter'></i>");
}, function() {
$('.btn-warning').text("Apply Filter <i class='fa fa-remove'></i>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>
Here You go.
$(".btn-warning").click(function() {
var $btn = $(this);
if ($btn.hasClass('x-on')) {
$btn.removeClass('x-on').html("Apply Filter <i class='fa fa-filter'></i>");
} else {
$btn.addClass('x-on').html("Remove Filter <i class='fa fa-remove'></i>");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>
toggle doesn't work how this code would like it to. It doesn't mean do this or do something else - When you toggle you cause JQuery to fade-out/in the element and the function call is performed when the animation completes.
So you click and fade out the element, but now there's nothing to click on to bring it back and your changes will not be seen.
To change the code on click we can simply set a variable on the function itself (this.clicked) and toggle the html of the element based on whether it's the first or second click. This will be determined by checking if this.checked is true or false.
$(".btn-warning").click(function() {
if (this.clicked == undefined) this.clicked = false;
this.clicked = !this.clicked;
(this.clicked) ?
$('.btn-warning').html("Remove Filter <i class='fa fa-filter'></i>") :
$('.btn-warning').html("Apply Filter <i class='fa fa-remove'></i>");
});
$(".btn-warning").click(function() {
let btn = $(".btn-warning");
if (this.clicked == undefined) this.clicked = false;
this.clicked = !this.clicked;
(this.clicked) ?
btn.html("Remove Filter <i class='fa fa-filter'></i>") :
btn.html("Apply Filter <i class='fa fa-remove'></i>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>
(1) The JQuery toggle() method will toggle the button visibility, you don't need this one.
(2) If you need to change the html of an element, do not use the text() method, instead use the html() method. The text() method will not recognize the html markup as you want.
One approach you can use is detecting if the <i> tag inside the button has some class (Read about hasClass()), and then act based on this condition:
$(".btn-warning").click(function()
{
if ($(this).find("i").hasClass("fa-filter"))
$(this).html("Remove Filter <i class='fa fa-remove'></i>");
else
$(this).html("Apply Filter <i class='fa fa-filter'></i>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">
Apply Filter <i class="fa fa-filter"></i>
</button>
Try this. I think this will more-or-less get you started.
https://jsfiddle.net/3bq9fuwz/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>
$(".btn-warning").click(function() {
$(this).html('It is a new name bro');
$(this).find($(".fa")).removeClass('fa-filter').addClass('fa-remove');
});
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 ...)
In the form, I have put a textbox and a button as:
<input type="text" class="form-control" id="txtCustomerId" placeholder="Customer ID">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" data-toggle="modal" data-target="#LovCustomer"><i class="fa fa-list"></i></button>
</span>
when this button is pressed, a modal form (bootstrap) is popped up. I have placed a button on the modal form as:
<td><button id="LSSL" value="LSSL" class="btn btn-info btn-xs"><i class="fa fa-caret-right"></i></button></td>
I have below jQuery in <head>:
$(function(){
$('#LSSL').click(function(){
$('#txtCustomerId').val($(this).val());
});
});
My requirement is to obtain the value of the button being pressed (in the modal form) and assign it to the txtCustomerId of the parent form. But when I press the button, page gets refreshed and the text filed is blank (since it is refreshed).
I think the value is assigned but since the page is refreshed, assigned value vanishes.
I would like to know either to stop the page refresh or any other way of getting this achieved.
Thanks in advance.
Below is my <head> section for your reference:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function(){
$('button').click(function(e){
e.preventDefault();
var value = $(this).val();
$('#txtCustomerId').val(value);
});
});
</script>
</head>
Your button should be like this,
<td><button type="button" id="LSSL" value="LSSL" class="btn btn-info btn-xs"><i class="fa fa-caret-right"></i></button></td>
And in Js part, you can do preventDefault(),
$(function(){
$('#LSSL').click(function(e){
e.preventDefault();
var value = $(this).attr('value');
$('#txtCustomerId').val(value);
});
});
//You can also use $(document).ready(function(){}) as well.
$(document).ready(function(){
$('#LSSL').click(function(e){
e.preventDefault();
var value = $(this).attr('value');
$('#txtCustomerId').val(value);
});
});
Use
preventDefault() to stop the default behavior of button
$(function(){
$('#LSSL').click(function(e){
e.preventDefault();
alert($(this).val());
});
});
or use
<input id="LSSL" type="button" value="Click" onclick="doSomething(this)">
function doSomething(obj) {
alert(obj.value);
}
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>