I have two buttons in a span
<span class="somespan">
<button type="button">left</button>
<button type="button">right</button>
</span>
I have set up an .on event to trigger when one is activated.
$('.somespan').on("mousedown tap", function() {
direction = ($(this).text());
})
This produces the result leftright as it provides the button text for all buttons. How do I only get the button text for the clicked button?
The issue is because you've attached the event to the span. For this to refer to the button elements, you need to attach the event to that element instead. Try this:
$('.somespan button').on("mousedown tap", function() {
direction = $(this).text();
console.log(direction);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="somespan">
<button type="button">left</button>
<button type="button">right</button>
</span>
Alternatively, if you have to select the span, then you can find the clicked element by using event.target instead of this. Note the e in the handler function parameters.
$('.somespan').on("mousedown tap", function(e) {
direction = $(e.target).text();
console.log(direction);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="somespan">
<button type="button">left</button>
<button type="button">right</button>
</span>
You have to attatch the listener to the buttons :)
$('button').on("mousedown tap", function() {
direction = ($(this).text());
})
or in the span
$('.somespan').on("mousedown tap","button", function() {
direction = ($(this).text());
})
Try adding
$('.somespan button').on("mousedown tap", function() {
direction = ($(this).text());
})
In your case, you are adding the mousedown event to the span instead of the button
Related
Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>
I want to ask how to change an element button to an image using javascript when it's clicked? For example, from Submit button to an image of checked.
I use svg for demo, you can change it into <img src="https://some_picture">
var button = document.getElementsByTagName("button")[0];
button.addEventListener('click', function() {
button.innerHTML =`<svg width="50" height="50"></svg>`
});
<button>click</button>
Add a click event listener to the button that changes its outerHTML property:
btn.addEventListener('click', function(){
this.outerHTML = `<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">`
})
<button id="btn">Click</button>
function myFunction() {
document.getElementById("contentChange").innerHTML = "Hello World";
}
<button id="contentChange" onclick="myFunction()">Click me</button>
lHi,
I have some divs in a html doc and when I click the div I am adding a button. eg attached:
HTML:
<div class="week">
<div class="day wk1" id="day1">
<label for="day1">Test</label>
</div>
<div class="day wk1" id="day2">
<label for="day2">Test</label>
</div>
When I add a button by clicking on the div, no problem.
Add Button:
$(".day").click(function (e) {
e.preventDefault();
var check = $("#day7").width() - 2;
var insert = $(this).prop("id");
insert = `#${insert}`;
var par = $('<br class="break"><button class="testing">').html('Shift Manual Insert').width(check).css("background-color", "green");
par.appendTo(insert);
// console.log(insert);
});
When I remove the button by clicking on it it does remove it but simultaneously adds a new button as per the code above and below.
Remove Button:
$(".day").on('click','.testing', function(e){
e.preventDefault();
$(".break").remove;
$(this).remove();
});
I am sure I am doing something silly but for the life of me, I cannot figure it out? Please ignore my incorrect use of id's and classes, this is purely a test to gain experience.
Any help will be most appreciated.
Kind regards
Wayne
The event is getting propagated from the click handler on dom with .testing class to it's parent that is dom with .day class. .day have another click handler which add the element.So after removing the element again $(".day").click(function(e) { is getting fired which is adding back the button element
Replacee.preventDefault(); with e.stopPropagation(); in the click handler of .testing
$(".day").click(function(e) {
console.log('x')
e.preventDefault();
var check = $("#day7").width() - 2;
var insert = $(this).prop("id");
insert = `#${insert}`;
var par = $('<br class="break"><button class="testing">').html('Shift Manual Insert').width(check).css("background-color", "green");
par.appendTo(insert);
// console.log(insert);
});
$(".day").on('click', '.testing', function(e) {
e.stopPropagation();
$(".break").remove;
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="week">
<div class="day wk1" id="day1">
<label for="day1">Test</label>
</div>
<div class="day wk1" id="day2">
<label for="day2">Test</label>
</div>
Your button is present inside the div. So when you click the button, your div click event is also fired. This is due to event bubbling. Check https://www.w3schools.com/jquery/event_stoppropagation.asp
$(".day").on('click','.testing', function(e){
e.stopPropagation();
e.preventDefault();
$(".break").remove;
$(this).remove();
});
Issue when getting recently clicked button id. Form submit button decorated with fontawesome icons.
Operation:
On body click get button id
Submit form
Concept:
Mouse pointer over button click is working
Issue:
Mouse pointer exactly over button image(example:round arrow icon) click
not working.
Browser Console returning undefined
Any tweaks to make this work? Normally user will attracted by images and they will click over icons only. how fix this?
JSfiddle
Don't use body, only set it to the buttons then.
$(function() {
$('button').on('click', function(e) {
var buttonClicked = $(this).attr('id');
console.log(buttonClicked);
});
});
Working example.
I'm not sure if you want to do more work on the button click. So you could submit the form manually too in the callback. Just change the buttons to type="button" instead of submit and extend the callback:
$(function() {
$('button').on('click', function(e) {
var buttonClicked = $(this).attr('id');
console.log(buttonClicked);
// do your work
// submit the form manually
$("form").submit();
});
});
Working example.
If all you want is the ID of the button that was clicked, why attach the event to the body? I can maybe understand event delegation, but you only have two buttons here. Bind the click handler to both buttons. See http://jsfiddle.net/jvsxo8s0/4/
$(document).ready(function() {
$('button').on('click', function(e) {
target = $(e.target);
buttonclicked = target.attr('id');
console.log(buttonclicked);
e.preventDefault();
});
});
Dont know why you need the id, but you can use the submit() function from jQuery and serialize the form data.
$(function() {
$('#setpolicyform button').on('click', function(e) {
e.preventDefault();
// get button id
var buttonId = $(this).attr('id');
// form data
var formData = $('#setpolicyform').serialize();
console.log(formData);
// check the clicked id
if(buttonId === 'save') {
console.log('save');
} else {
console.log('send');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form role="form" method="POST" action="#" name="setpolicyform" id="setpolicyform">
<div class='box-body pad'>
<div class="form-group">
<div class="lnbrd">
<textarea class="textarea form-control" placeholder="Enter text ..." name="policyta" style="width: 510px; height: 200px;"></textarea>
</div>
</div>
</div>
<div class="box-footer clearfix">
<button type="button" class="btn btn-danger pull-right" id="save"><i class="fa fa-save"></i> SAVE</button>
<button class="btn btn-success" type="button" id="send"><i class="fa fa-arrow-circle-right fa-lg fa-fw"></i>Send</button>
</div>
</form>
</div>
Use this
$(document).ready(function() {
$('body').on('click', function(e) {
target = $(e.target);
buttonclicked = target.closest("button").attr('id');
console.log(buttonclicked);
});
});
Updated Fiddle is here http://jsfiddle.net/jvsxo8s0/6/
So,I have 8 buttons. Each one shows a div when it's pressed.The problem is that when I press multiple buttons , all of them show their divs and don't delete the previous ones. What can I do?
Html:
<button id ="btn1" >a</button>
<button id ="btn2">b</button>
<button id ="btn3">c</button>
<button id ="btn4">d3</button>
<button id ="btn5">e 4</button>
<button id ="btn6">f 5</button>
<button id ="btn7">g 6</button>
<button id ="btn8">h 7</button>
<div id="story">asdaasdasdasdadsasdsds</div>
<div id = "z2">asdaasdadsd</div>
<div id = "z3">asdasdasdad</div>
<div id = "z4">asdasdasdad</div>
<div id = "z5">asdasdasdad</div>
<div id = "z6">asdadsdaad</div>
<div id = "z7">asdads</div>
CSS:
#z1,
#z2,
#z3,
# z4,
#z5,
#z6,
#z7
{ display: none; }
JQuery:
$(function() {
$('#btn1').on('click', function() {
$('#story').fadeToggle(400);
});
$('#btn2').on('click', function() {
$('#z1').fadeToggle(700);
});
$('#btn3').on('click', function() {
$('#z2').fadeToggle(700);
});
$('#btn4').on('click', function() {
$('#z3').fadeToggle(700);
});
$('#btn5').on('click', function() {
$('#z4').fadeToggle(700);
});
$('#btn6').on('click', function() {
$('#z5').fadeToggle(700);
});
$('#btn7').on('click', function() {
$('#z6').fadeToggle(700);
});
$('#btn8').on('click', function() {
$('#z7').fadeToggle(700);
});
});
You can add a class to your div "divToHide" for instance and call
$('.divToHide').hide();
in your click method
here is a fiddle :http://jsfiddle.net/U5PEu/1/
You by the way have an extra space into you css between # and z4
You're not hiding the others because you're not doing anything with them. Try changing all of your on click handlers to be like this:
$('#btn1').on('click', function() {
// hides currently shown divs
$('.visible').removeClass('visible').fadeOut(700);
// shows div in question, and adds a class that can be queried later
$('#story').addClass('visible').fadeIn(400);
});
The "visible" class that is added can be used to collect and remove any visible divs (or any element, really), regardless of what showed them.