This question already has answers here:
Bootstrap onClick button event
(2 answers)
Closed 6 years ago.
Ok I'm new to bootstrap themes and all, so was trying to fire a javascript onclick method on
the below bootstrap button but couldn't figure out how to do so..
<a class="btn btn-large btn-success" href="http://twitter.github.io/bootstrap/examples/marketing-narrow.html#">Send Email</a>
Any help would be appreciated..
Just like any other click event, you can use jQuery to register an element, set an id to the element and listen to events like so:
$('#myButton').on('click', function(event) {
event.preventDefault(); // To prevent following the link (optional)
...
});
You can also use inline javascript in the onclick attribute:
<a ... onclick="myFunc();">..</a>
<a class="btn btn-large btn-success" id="fire" href="http://twitter.github.io/bootstrap/examples/marketing-narrow.html#">Send Email</a>
$('#fire').on('click', function (e) {
//your awesome code here
})
You can use 'onclick' attribute like this :
<a ... href="javascript: onclick();" ...>...</a>
Seem no solutions fix the problem:
$(".anima-area").on('click', function (e) {
return false; //return true;
});
$(".anima-area").on('click', function (e) {
e.preventDefault();
});
$(".anima-area").click(function (r) {
e.preventDefault();
});
$(".anima-area").click(function () {
return false; //return true;
});
Bootstrap button always maintain th pressed status and block all .click code.
If i remove .click function button comeback to work good.
Related
I have this button:
<button
type="button"
onclick='parent.parent.ExecuteCommand(14);event.stopPropagation()'
class="button_air-medium">
<img
id="selectMode"
class="shortcutContant"
src="../stdicons/icon_select.gif">
</button>
As you can see inside onclick attribute I call 2 functions ExecuteCommand and stopPropagation.
The execute command works fine but it seem to me that stopPropagation method is not fired because the element under the button is influenced.
Any idea why stopPropagation method is not working?
There is likely no eventavailable to the inline handler in the browser you are using
You will have an easier time if you do
$(function() {
$(".button_air-medium").on("click",function(e) {
e.stopPropagation();
parent.parent.ExecuteCommand($(this).data("commandnumber"))
// or return false here
});
});
using
<button type="button" data-commandnumber="14"
class="button_air-medium"><img id="selectMode" class="shortcutContant"
src="../stdicons/icon_select.gif"></button>
If you want to stop the image from handling events you could try
$(function() {
$(".button_air-medium").on("click",function(e) {
e.stopPropagation();
parent.parent.ExecuteCommand($(this).data("commandnumber"))
// or return false here
});
$(".button_air-medium > img").on("click",function(e) {
$(this).parent().click();
return false;
});
});
or find where it is handled and edit that handler
I'm using the following <a> tag to display a simple confirm which it does. However, when I click the Cancel button it still performs the post method. From my understanding, having the return in front of confirm should cause the form to not post if the Cancel button is clicked.
<a href="#"
data-potr-action="delete"
data-potr-val="#item.RID"
onclick="return confirm('Are you sure you want to delete this Request?');"
class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-trash"></i> Delete
</a>
I have this code at the end of the page but I don't think it has anything to do with the issue. I didn't thinking it would fire the click event when selecting Cancel in the Confirm dialog.
This just takes the values in the data-action and data-value and stores them to a hidden field. This is done on click which it shouldn't be getting to.
#section scripts {
<script>
$(document).ready(function () {
// Hook events on buttons and anchors
buildClickEvents();
});
// Hook events on buttons and anchors
function buildClickEvents() {
$("[data-potr-action]").on("click", function (e) {
e.preventDefault();
$("#EventCommand").val(
$(this).data("potr-action"));
$("#EventArgument").val(
$(this).attr("data-potr-val"));
$("form").submit();
});
}
</script>
}
To answer your question no confirm doesn't block form post. It return true if pressed "OK" or false if pressed "Cancel" button. See this from W3c
What you could is as below:
function buildClickEvents() {
$("[data-potr-action]").on("click", function (e) {
e.preventDefault();
var result = confirm('Are you sure you want to delete this Request?');
if(result == false){
return;
}
$("#EventCommand").val(
$(this).data("potr-action"));
$("#EventArgument").val(
$(this).attr("data-potr-val"));
$("form").submit();
});
}
And remove the below from a tag:
onclick="return confirm('Are you sure you want to delete this Request?');"
$("[data-potr-action]").on("click", function (e) {
if(confirm("your message")){
$("#EventCommand").val(
$(this).data("potr-action"));
$("#EventArgument").val(
$(this).attr("data-potr-val"));
$("form").submit();
}
e.preventDefault();
});
Hi this is an odd question and i will try to ask it correctly. I have a function using javascript called load canvas.
function loadCanvas(canvas) {
relevant code here...
}
I also have a normal button called btn.
<button class="btn" type="button">Play!</button>
I am wondering can i disable the function until the play button is selected? The function is for a game using javascript. So on load there isnt anything there until i press play then it appears!
any ideas/help please?
$(document).ready(function(){
var loadCanvas= function (canvas) {
relevant code here...
}
$("#test").on('click',loadCanvas()); // using jquery
document.getElementById("test").addEventListener("click",loadCanvas()); // using javascript
<button class="btn" id="test" type="button">Play!</button>
})
If you are having issue because other method is triggering the function you can add a flag with a boolean and turn it on when you click..
Something like that:
The button don't change at all
<button class="btn" type="button">Play!</button>
The js code with this change:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
And in the on click function add this before call the function:
buttonClicked = true;
At the end your js should look like this:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
$(".btn").click(function(){
buttonClicked = true;
var canvas = ...;
loadCanvas(canvas );
});
EDIT
If you have more buttons with the class .btn you should use an id and change the selector of the .click() with the selector of the id instead of the class selector
As you mentioned in the comments <script type="text/javascript"> loadCanvas("game"); </script> You are calling the function as soon as the page loads. So you will have to change it to:
<button class="btn play-button" type="button">Play!</button>
<script type="text/javascript">
$('.play-button').click(function(e){
loadCanvas("game");}
);
</script>
If you are not using jquery you will have to handle the click event by javascript.
You got to do following:
function loadCanvas(game) {
alert('loading canvas');
}
<button class="btn" type="button" onclick="loadCanvas('game')">Play!</button>
This question already has answers here:
disable a hyperlink using jQuery
(11 answers)
Closed 8 years ago.
I do have the following click function on a div element. Inside the div element are links. How can I stop the click function on this links? I tried z-index but it doesn't work.
$('.thumb.flip').click(function () {
if ($(this).find('.thumb-wrapper').hasClass('flipIt')) {
$(this).find('.thumb-wrapper').removeClass('flipIt');
} else {
$(this).find('.thumb-wrapper').addClass('flipIt');
}
});
Add code to stop the click from propagating from the links up the DOM to the div:
$('a').click(function(e){e.stopPropagation();})
See http://api.jquery.com/event.stoppropagation/
jsFiddle example
Try e.preventDefault()
$('.thumb.flip').click(function (e) {
e.preventDefault();
if ($(this).find('.thumb-wrapper').hasClass('flipIt')) {
$(this).find('.thumb-wrapper').removeClass('flipIt');
} else {
$(this).find('.thumb-wrapper').addClass('flipIt');
}
});
Capture the event object:
$('.thumb.flip').click(function (evt) {
Test to see what sort of element was clicked:
if (evt.target.tagName.toLowerCase() === "a") {
return true;
}
Use the mouse down event and in your handler call event.stopPropagation() and event.preventDefault();
if click target is an a just return false else do normal stuff...
$('.thumb.flip').click(function (e) {
if ($(e.target).is('a')) {
return false;
}
});
z-index won't do anything, however if you want to prevent clicks from css you can add pointer-events property to links and set the value none. That will disable all kind of events on links.
$('.thumb.flip').click(function (e) {
if (e.target.nodeName==="A") { //if target is an anchor, ignore
return;
}
$(this).find('.thumb-wrapper').toggleClass('flipIt') //toggle class
});
If you can edit markup do this:
<a href="javascript:void(0);" ></a>
I have the following element
<button type="button" class='launch' data-toggle="modal" data-target="#myModal">Launch modal</button>
<button type="button" class='boom' data-toggle="modal" data-target="#myModal"> Boom </button>
and I have an event listener:
$('#myModal').on('show', function () {
// how do I check if button has class launch or boom?
})
how do I check if button has class launch or boom inside the function?
or in other words the question is how do I get the button that triggers this action inside this function.
use the jQuery .hasClass method to check whether the class exsists.
$('#element').hasClass('launch'); // returns true or false;
try the code below. Please add the .myModalbtn class to both buttons
$('.myModalbtn').on('hidden', function () {
$(this).hasClass('launch')) // if the it has launch class -> returns true else false;
});
You can add a separate class for each button like .modalBtn for example and do:
$('.modalBtn').click(function() {
if ($(this).hasClass('launch')) showModal($('.launch'));
else if ($(this).hasClass('boom')) showModal($('.boom'));
});
function showModal( $btn ) {
//insert code to show modal (you can find it in the bootstrap javascript docs. Now you have $btn object to use.
}