I want to create a back button browser event using jquery. I did this code but it doesnt appear to work
$(document).ready(function() {
$('.back').click(function() {
window.history.back();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Back
The href="#" will add a new item to history, so window.history.back(); will "return" to the page where the link was clicked. You need to prevent the link from directing to # with this:
$( document ).ready(function() {
$('.back').click(function(e) {
e.preventDefault();
window.history.back();
});
});
you are missing to specify event as function argument, try this one..
$(".back").click(function(event) {
event.preventDefault();
history.back(1);
});
This might solve your problem.
Related
I have created 5 buttons. I'm loading some pages on button click. I want the first button automatically clicked on page load and load it's corresponding html file and the remaining buttons should load html files only on clicking them. Someone help me!!
This is my jquery:
$('a#Home').click(function() {
$("#home").load("x.html");
});
$('a#Menu1').click(function() {
$("#menu1").load("y.html");
});
$('a#Menu2').click(function() {
$("#menu2").load("z.html");
});
$('a#Menu3').click(function() {
$("#menu3").load("searcharray.html");
});
$('a#Menu4').click(function() {
$("#menu4").load("sortarray.html");
});
Just test this code. I think this will help you.
$( document ).ready(function() {
console.log( "ready!" );
$('#btn1').trigger( "click" );
});
function fun1()
{
alert('loaded');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" onclick="fun1()">btn1</button>
<button id="btn2">btn1</button>
<button id="btn3">btn1</button>
<button id="btn4">btn1</button>
trigger the event yourself:
$('a#Home').click(function() {
$("#home").load("x.html");
});
$('a#home').trigger('click');
Theoretical answer
You can trigger any event on any element using the .trigger() method. This will require you to specify which event you want to fire. More information.
It is also possible to trigger a click event just by calling .click() after binding the event handling. The documentation shows us that we can use this function for both purposes.
$( document ).ready() is an interaction that can be used to run code once when the document has been loaded. More info on that can be found here.
Examples
Example #1 (using .trigger())
$( document ).ready(function() {
$('a#Home').trigger('click');
});
Example #2 (using .click())
$( document ).ready(function() {
$('a#Home').click();
});
Assuming the first button is Home then you want run that on document ready by using $(function()
<script>
$(function() {
$('a#Home').click();
});
function loadHome() {
$("#home").load("x.html");
};
</script>
Then update your link to be like:
<a id="Home" onclick="loadHome()">Click Me</a>
You can try this:
<script>
function pageLoad()
{
alert('hello');
}
pageLoad();
</script>
<button id="btn1" onclick="pageLoad()">btn1</button>
I'm trying to override all 'a' tags in a document with a specific class to prevent their default behavior and send a javascript alert. Here is my code so far:
$('.specific-class').click(function (event) {
event.preventDefault();
event.onclick('alert("hello world")');
});
This code stops the links from firing, as it should, but it doesn't send my 'hello world' message.
Does anyone know the appropriate syntax to make the alert fire when the links are clicked? Let me know if I can provide any additional information!
Your error was using event.onclick(); instead of just alert() which will fire when you click
Here is the snippet:
$('.specific-class').click(function (e) {
e.preventDefault();
alert("hello world");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="specific-class">hi you, click me.</div>
Use alert inside handler as this function will be executed on the click of anchor.
$('.specific-class').click(function (event) {
event.preventDefault();
alert("hello world");
});
Or you can also update the onclick attribute value on page load
$(document).ready(function() {
$('.specific-class').attr('onclick', 'alert("Hello World!"); return false;');
});
I'm having a hard time understand how to simulate a mouse click using JQuery. Can someone please inform me as to what i'm doing wrong.
HTML:
<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>
jQuery:
jQuery('#foo').on('click', function(){
jQuery('#bar').trigger('click');
});
Demo: FIDDLE
when I click on button #foo I want to simulate a click on #bar however when I attempt this, nothing happens. I also tried jQuery(document).ready(function(){...}) but without success.
You need to use jQuery('#bar')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/
You just need to put a small timeout event before doing .click()
like this :
setTimeout(function(){ $('#btn').click()}, 100);
This is JQuery behavior. I'm not sure why it works this way, it only triggers the onClick function on the link.
Try:
jQuery(document).ready(function() {
jQuery('#foo').on('click', function() {
jQuery('#bar')[0].click();
});
});
See my demo: http://jsfiddle.net/8AVau/1/
jQuery(document).ready(function(){
jQuery('#foo').on('click', function(){
jQuery('#bar').simulateClick('click');
});
});
jQuery.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE Boss!
}
});
}
May be useful:
The code that calls the Trigger should go after the event is called.
For example, I have some code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
$(function() {
$("#expense_tickets").change(function() {
// code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
});
// now we trigger the change event
$("#expense_tickets").trigger("change");
})
jQuery's .trigger('click'); will only cause an event to trigger on this event, it will not trigger the default browser action as well.
You can simulate the same functionality with the following JavaScript:
jQuery('#foo').on('click', function(){
var bar = jQuery('#bar');
var href = bar.attr('href');
if(bar.attr("target") === "_blank")
{
window.open(href);
}else{
window.location = href;
}
});
Try this that works for me:
$('#bar').mousedown();
Technically not an answer to this, but a good use of the accepted answer (https://stackoverflow.com/a/20928975/82028) to create next and prev buttons for the tabs on jQuery ACF fields:
$('.next').click(function () {
$('#primary li.active').next().find('.acf-tab-button')[0].click();
});
$('.prev').click(function () {
$('#primary li.active').prev().find('.acf-tab-button')[0].click();
});
I have tried top two answers, it doesn't worked for me until I removed "display:none" from my file input elements.
Then I reverted back to .trigger() it also worked at safari for windows.
So conclusion, Don't use display:none; to hide your file input , you may use opacity:0 instead.
Just use this:
$(function() {
$('#watchButton').trigger('click');
});
You can't simulate a click event with javascript.
jQuery .trigger() function only fires an event named "click" on the element, which you can capture with .on() jQuery method.
Ive the following code:
<script type="text/javascript">
$(document).ready(function(){
shortcut.add("Ctrl+Alt+N", function() {
$("#btnSave").click();
});
});
</script>
where btnSave is anchor element with ID btnSave, shortcut is from http://www.openjs.com/scripts/events/keyboard_shortcuts/ . If i change the line $("#btnSave").click(); to document.getElementById("btnSave").click() - all works fine. The question is why jquery implementation is not working in my case?
PS: made jsfiddle for my case: http://jsfiddle.net/0x49D1/WCmeU/
Here is the guy with similar problem: http://forums.asp.net/t/1591818.aspx
Instead of $("#btnSave").click(); try with $("#btnSave").trigger('click');
You can also use $("#btnSave")[0].click(); which is jquery equivalent to document.getElementById("btnSave").click();
Update:
It's not possible to simulate a user link click from javascript, for security reasons, all you can do is attach your own handler for click event and redirect based on the href of the link, like so:
$("#btnSave").bind('click', function() {
window.location.href = $(this).attr('href');
});
try this
<script type="text/javascript">
$(document).ready(function(){
shortcut.add("Ctrl+Alt+N", function() {
$("#btnSave").live('click',function(){
// do stuff here
});
});
}); </script>
I'm about to make a function on jQuery like this:
$(document).ready(function() {
$('#header_rules').click(function() {
// here i define myFunction()
});
});
<a id="header_rules" href="#">RULES</a>
instead of
<a id="header_rules" href="#" onClick="myFunction();return false">RULES</a>
But I don't know how to prevent scrolling to the top of the page using jQuery after someone clicks the link.
In fact, I'll total get rid about native JS, which could yield some trouble (that's why I use a JS framework like jQuery).
Any help? Cheers
Call e.preventDefault(); where e is the first argument of your click handler:
$(document).ready(function() {
$('#header_rules').click(function(e) {
e.preventDefault();
// here i define myFunction()
});
});
<a id="header_rules" href="#">RULES</a>
The below will also work, but it'll stop other click events on the item, I think.
(document).ready(function() {
$('#header_rules').click(function() {
// here i define myFunction()
return false;
});
});
What ThiefMaster said, and you could also inclue return false; inside your function intead of inline.