<a id="f_post_button" href="javascript:toggle_hide('f_post_button','f_postbox','post');">
<button class="btn btn-hg btn-primary">Make a Post</button>
</a>
This is working fine for me in safari and chrome, but in IE and Firefox it just opens a blank page. Is there any alternative way to do it?
If it is a button you don't need to use href you can use onclick
Try this:
<button class="btn btn-hg btn-primary" onclick="toggle_hide('f_post_button','f_postbox','post')">Make a Post</button>
http://www.w3schools.com/js/tryit.asp?filename=tryjs_function3
add void method to resolve this
<a id="f_post_button" href="javascript:void(toggle_hide('f_post_button','f_postbox','post'));">
<button class="btn btn-hg btn-primary">Make a Post</button>
What is saying Quentin is something like this :
<button id="my-button" class="btn btn-hg btn-primary">Make a Post</button>
var myButton = document.getElementById("my-button");
myButton.click = function (f_post_button,f_postbox,post){
//do your stuff for toggle here
}
Related
I have created a delete Photo button which works as if we click on it a another delete button appear in somewhere in code , the code is
<button type="button" class="btn btn-danger" onclick="showdel()">Delete Photo</button>
after that I created div element where that delete button should be created .
<div id="del"></div>
and function for this is .
function showdel(){
var div = document.getElementById('del');
div.innerHTML = '<center><button class="btn btn-danger">DELETE</button></center>';
}
But it is not working.
Your code should look like
<button type="button" class="btn btn-danger" onclick="showdel()">Delete Photo</button>
<div id="del">
</div>
function showdel(){
document.getElementByID("del").style.visibilty="hidden"
}
I have a div in which there are 3 buttons. What I am expecting is that when I click the 3rd button, the 2nd and the 3rd buttons should fadeOut ... but in reality, only the 3rd button is fading out ... why so?
Here's, my code
<div id="bttns">
<button class="btn btn-danger"> Delete </button> //1st Button
<button class="btn btn-warning"> Modify </button> //2nd Button
<button class="btn btn-success"> Complete </button> //3rd Button
</div>
And here is the jQuery
$(".btn-success").on("click", function(){
$( $(this) , $(this).parent().children(".btn-warning") ).fadeOut(500)
})
I couldn't find a question similar to mine ... and also I am new to all of this so if you do find that such a question exists, please redirect me to it.
This happens becuse:
$( $(this) , $(this).parent().children(".btn-warning") )
this is not a valid selector here. To chain multiple jQuery objects you can use .add() method and then call .fadeOut(500) on the collection like:
$(".btn-success").on("click", function() {
var $btn3 = $(this);
var $btn2 = $(this).parent().children(".btn-warning");
$btn2.add($btn3).fadeOut(500)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bttns">
<button class="btn btn-danger"> Delete </button>
<button class="btn btn-warning"> Modify </button>
<button class="btn btn-success"> Complete </button>
</div>
As you have assigned classes. You can go like this :-
$(".btn-success").on("click", function () {
$('.btn-warning, .btn-success').fadeOut(500);
})
you are fading out only the button with the btn-warning class. instead use two selectors.
$(".btn-success").on("click", function(){
$(this).parent().children(".btn-warning, .btn-success").fadeOut(500)
})
I can't figure out why 'onClick' function trigged twice.
My html code:
<div class="form-actions right1">
<button type="button" id="btnCancel" class="btn default">
Cancel
</button>
<button type="submit" id="btnSubmit" class="btn blue">
Submit
</button>
</div>
Script is here:
$("#btnSubmit").on("click",function () {
debugger;
alert("Click");
CreateOfficeTypeManager.SaveOfficeType();
});
You might be binding the "click" even twice.
Put a breakpoint in your $("#btnSubmit")... instruction and see if it goes there twice.
Otherwise, try unbinding as shown here button onclick function firing twice
Finally, if you're in a complex environment, there might be other code handling the clicks for you. Try preventDefault as suggested in the comments of your question.
It works fine.
$("#btnSubmit").on("click",function () {
debugger;
alert("Click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-actions right1">
<button type="button" id="btnCancel" class="btn default">
Cancel
</button>
<button type="submit" id="btnSubmit" class="btn blue">
Submit
</button>
</div>
is it posible to make a universal jquery for basically all buttons in my code with diferent ids? i cant seem to get this to work. what im trying to achieve is everytime a button is clicked the javascript will add a class for that specific button that was clicked.
HTML :
<button type="button" onClick="myFunction(this.id)" id="test1" class="btn btn-primary btn-xs pull-right">button 1</button>
<button type="button" onClick="myFunction(this.id)" id="test2" class="btn btn-primary btn-xs pull-right">button 2</button>
<button type="button" onClick="myFunction(this.id)" id="test2" class="btn btn-primary btn-xs pull-right">button 2</button>
JS :
function myFunction(this) {
$(this).addClass("animated flipInY");
setTimeout(function(){
$(this).removeClass("animated flipInY")
},1000);
}
You can use click event with button selector and it will work for all your button :
$('button').on('click', function(){
$(this).addClass('animated flipInY');
}
Hope this helps.
I think the problem you have is more related with calling the "removeClass" for all buttons...
For that you need to change
setTimeout(function(){
$(this).removeClass("animated flipInY")
},1000);
to
setTimeout(function(){
$('button').removeClass("animated flipInY")
},1000);
in your code (or better add it to Zakaria answer).
I have a button made using href like so:
<div id='swipebuttons'>
<a href="" class="btn btn-default btn-success" id='swiperightbtn'>Swipe right (yes)</a>
<a href="" class="btn btn-default btn-danger" id='swipeleftbtn'>Swipe left (no)</a>
<div>
And jquery backend like so:
$('#swiperightbtn').on("click",function() {
document.write('yes');
});
I am using document.write just to test that it is actually working. However, when I load this nothing happens, along with no reports in the log/developer console.
Try this,
$(function(){
$('#swiperightbtn, #swipeleftbtn').on("click",function(e) {
e.preventDefault();
alert('yes');
});
});
HTML:
<div id='swipebuttons'>
<a href="" class="btn btn-default btn-success" id='swiperightbtn'>Swipe right (yes)</a>
<a href="" class="btn btn-default btn-danger" id='swipeleftbtn'>Swipe left (no)</a>
<div>
Demo: http://jsfiddle.net/37am9/1/
Or you can use the selector $('#swipebuttons a')
Try this
$(document).ready(function(event){
$('#swiperightbtn').on("click",function() {
document.write('yes');
return false;
event.preventDefault();
});
});
Gotta keep the anchor from thinking it has another job to do.
$('#swiperightbtn').on("click",function() {
document.write('yes');
return false;
});
Example working
If you don't event.preventDefault(); or return false; the link will try to continue to the empty href="".