How to click a button element on page load

Question

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");
});

$('a#Home').trigger('click') api.jquery.com/trigger however better use $("#home").load("x.html"); — Satpal
– Satpal, Commented Apr 10, 2017 at 7:25
1) Call trigger('click'), or click() on the required element 2) DRY up your code — Rory McCrossan
– Rory McCrossan, Commented Apr 10, 2017 at 7:26
Why don't you put the link on the href and trigger the Home button on load? — Dr. Roggia
– Dr. Roggia, Commented Apr 10, 2017 at 7:28

Pankaj Sharma · Accepted Answer · 2017-04-10 07:46:32Z

1

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>

edited Apr 10, 2017 at 7:46

answered Apr 10, 2017 at 7:37

Pankaj Sharma

2365 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sahal Tariq · Accepted Answer · 2017-04-10 07:28:09Z

0

trigger the event yourself:

$('a#Home').click(function() {
  $("#home").load("x.html");
});
$('a#home').trigger('click');

answered Apr 10, 2017 at 7:28

Sahal Tariq

1981 silver badge9 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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();
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 10, 2017 at 7:31

yarwest

1,0409 silver badges21 bronze badges

Comments

Deanmv · Accepted Answer · 2017-04-10 08:06:28Z

0

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>

edited Apr 10, 2017 at 8:06

answered Apr 10, 2017 at 7:26

Deanmv

1,21110 silver badges13 bronze badges

1 Comment

Jai Over a year ago

I want the first button automatically clicked on page load......Your code does not do that.

Therichpost · Accepted Answer · 2017-04-10 08:52:53Z

0

You can try this:

 <script>
       function pageLoad()
{
    alert('hello');
}

pageLoad();

 </script>

<button id="btn1" onclick="pageLoad()">btn1</button>

answered Apr 10, 2017 at 8:52

Therichpost

1,8132 gold badges15 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to click a button element on page load

5 Answers 5

Comments

Comments

Theoretical answer

Examples

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Theoretical answer

Examples

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related