I have these buttons:
<button class="btn" id="empty">Empty Cart</button>
<button class="btn" id="submit">Add to Cart</button>
And this in a $(document).ready block in the head:
$("#empty").click(function() {
alert("I give up");
});
$("#submit").click(function() {
// ...
});
Why does #submit work and #empty does not?
It seems there are no problems here! I put it in this code snippet. So if any other problem is here notice me.
$("#empty").click(function() {
alert("I give up");
});
$("#submit").click(function() {
alert("I am submit");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" id="empty">Empty Cart</button>
<button class="btn" id="submit">Add to Cart</button>
The main reason may prevent to call click is with dynamic elements. In this case, you should use:
$(document).on('click', '#empty', function() {
alert("I give up");
});
Related
I'm am attempting to add a new row to a table by clicking an add row button. However, clicking the add row button simply refreshes the page.
I have tried multiple ways to stop this such as preventDefualt and return false, all to no avail.
<script type="text/javascript">
$(function() {
$('#btn-add-item').on('click'),
function(e) {
e.preventDefault();
alert("works");
return false;
}
});
</script>
<button class="btn btn-primary btn-sm" id="btn-add-item"><i class="fa fa-plus"></i> Add item</button>
You have to close the click handler properly, check the location of end parenthesis.
Below is the snippet with correct format:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#btn-add-item').on('click', // <-- removing end paranthesis after "click" event will close the function
function(e) {
e.preventDefault();
alert("works");
return false;
}); // <-- adding end paranthesis here
});
</script>
<button class="btn btn-primary btn-sm" id="btn-add-item"><i class="fa fa-plus"></i> Add item</button>
function test() {console.log('test');}
$('#btna').click(function(){
$('#btnb').onclick = test();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btna'>BUTTON A</button>
<button id='btnb'>BUTTON B</button>
Clicking on btna I want just bind test() function to btnb and NOT execute them.
Any help?
you can use this code for bind event
function test() {console.log('test');}
$('#btna').click(function(){
$('#btnb').bind({click:test});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btna'>BUTTON A</button>
<button id='btnb'>BUTTON B</button>
You can bind the event using .on()
function test() {console.log('test');}
$('#btna').click(function(){
$(document).on('click', '#btnb', test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btna'>BUTTON A</button>
<button id='btnb'>BUTTON B</button>
Try this example
function test() {
console.log(this);
}
$(function() {
var btnb = $('#btnb');
$('#btna').on('click', function() {
console.log(this);
if (btnb.data('enbld')) {
return; /* avoid multiple click bindings */
}
btnb.on('click', test).data('enbld', 1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btna'>BUTTON A</button>
<button id='btnb'>BUTTON B</button>
Why not bind it the same way as you did the first click event.
function test() {console.log('test');}
$('#btna').click(function(){
$('#btnb').click(function() { test(); });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btna'>BUTTON A</button>
<button id='btnb'>BUTTON B</button>
Do it like this.
function test() {console.log('test');}
$('#btna').click(function(){
$('#btnb').bind('click', test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btna'>BUTTON A</button>
<button id='btnb'>BUTTON B</button>
There you go!
function test() {console.log('test');}
$('#btna').click(function(){
$( "#btnb").unbind( "click" ); // just incase user clicks the button A multiple times
$('#btnb').click(function(){test();})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btna'>BUTTON A</button>
<button id='btnb'>BUTTON B</button>
I have in HTML a button with id="button1".
We have JavaScript function:
$('#button1').click(function() { ... } );
It works well.
But what if we have 100 buttons with different IDs?
I can duplicate 100x function. However, this is not very elegant and good solution.
How to easily and effectively solve a problem for many buttons?
The function performed is the same for all buttons.
Add a class bind to this:
$(document).ready(function(){
//dot (.) selector binds to classes
$('.boundButton').click(function(){
//clicked button
var $this = $(this);
alert($this.attr('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1" class="boundButton">1</button>
<button id="2" class="boundButton">2</button>
<button id="3" class="boundButton">3</button>
You need to use a class instead of ID. For example, your JS code could look like:
$('.button-class').click(function() { ... } );
and your HTML might look like
<button name='example' class='button-class' id='exampleID'>Button Text</button>
Here is the basic example:
$(document).ready(function () {
$(".btn").on("click", function(){ //attach click event to all buttons with class "btn"
console.log($(this).attr("id")); //$(this) refers to the button clicked
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button 1</button>
<button id="btn2" class="btn">Button 2</button>
<button id="btn3" class="btn">Button 3</button>
In my JS when a button with data-complete is clicked it gives me the value I need via targetDiv.
From this I am having issues with the .complete-tick class as I would like to add the .css({'display' : 'block'}); class to it. How?
HTML:
<button class="complete" data-complete="showTick-1" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>
JS:
$(function(){
$('[data-complete]').on('click', function(e) {
var targetDiv = jQuery(this).attr('data-complete');
(".complete-tick").css({'display' : 'block'});
e.preventDefault();
});
});
You need to add necessary styling for div with class .complete-tick. as far as your issue is concerned below code should work.
$(function(){
$('[data-complete]').on('click', function(e) {
//var targetDiv = $(this).attr('data-complete');
$(this).find(".complete-tick").css('display','block');
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="complete" data-complete="showTick-1" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>
PS: You are missing font-awesome css.
EDIT: I added some spare buttons to demonstrate that it works for multiple buttons, and the text 'Tick goes here' as a placeholder (I assume in your actual project you are including the font-awesome files so that an actual tick displays)
Is this what you mean? You don't need to worry about fetching targetDiv if you always just want to target .complete-tick inside the clicked button:
$(function(){
$('[data-complete]').on('click', function(e) {
$(".complete-tick", this).css('display','block');
e.preventDefault();
});
});
.complete-tick {
display:none;
}
.complete-tick i:before {
content:'tick goes here';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="complete" data-complete="showTick-1" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>
<button class="complete" data-complete="showTick-2" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>
<button class="complete" data-complete="showTick-3" type="button">click me <div class="complete-tick"><i class="fa fa-check"></i></div></button>
I'm looking for the mootools equivalent of the jquery way. I need to link a button click on clicking another button
$('#myButton').click(function(){
// execute some function
});
Is this what you want?
<script type="text/javascript">
function callNewClick()
{
document.getElementById('btnTwo').click();
}
function helloUser()
{
alert('Hello!');
}
</script>
<button id="btnFirst" onclick="callNewClick();"> ClickFirst </button>
<button id="btnTwo" onclick="helloUser();"> Hello </button>
For example, in your code:
$('#myButton').click(function(){
document.getElementById('yourBtnTwoId').click();
});