CODEWITHSUNDEEP
javascriptjquery
Débora
Débora

Reputation: 5952

jQuery trigger an element's event

My question is same as this one

I also faced the same problem which is href not triggered for event 'clicked' .Then I changed to alt and element is span . Here is my code 

<li><h2><span id='aa' alt="#inbox"><span>Inbox</span></span></h2></li>

This line is my 2nd child of ul . I want to trigger/click this line when the page is loaded.

But I want to know how to trigger this span's(#aa) click event.Following codes are tried.but not worked.
first try:

var href = $('#aa').attr('alt');
      window.location.href =href; // this gave me 404 error

2nd try:

 $('#aa').trigger("click")   // this has no change

Edit a function will be executed when the above mentioned li>span is clicked. I want that li's span be clicked automatically when the page has loaded. this question 's answers say some problems when <a href> is used.Therefore, I used span tag instead. I use jQuery 1.6

Upvotes: 0

Views: 816

Answers (4)

bygrace
bygrace

Reputation: 5988

I think the easiest solution is to change your spans to anchor tags to handle any clicks after load if all you want to do is to add the hash tag to the current url. Then you could just have a bit of jquery to select the link you want on page load.

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        window.location.hash = $('#second').attr('href');
    });
    </script>
</head>
<body>
    <ul>
        <li><a href="#first">First</a></li>
        <li><a href="#second" id="second">Second</a></li>
    </ul>
</body>
</html>

If that isn't what you want and you want to run more code on click then you could separate out your click logic into a function and call it on page load like this:

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        //your function that does stuff on click
        function doStuff(item) {
            window.location.hash = $(item).attr('href');
            //cancel the click
            return false;
        }

        //call the function on page load
        doStuff($('#second'));

        //call the function on click
        $('#nav a').click(function() { doStuff(this); });
    });
    </script>
</head>
<body>
    <ul id="nav">
        <li><a href="#first">First</a></li>
        <li><a href="#second" id="second">Second</a></li>
    </ul>
</body>
</html>

Upvotes: 1

Muhammet G&#246;kt&#252;rk Ayan
Muhammet G&#246;kt&#252;rk Ayan

Reputation: 376

If I understood correctly, this will solve your problem;

Give clickkable propety to span like this.

$('#aa')
        .bind('click', function () { 
               .....
});

And call it like this in document.ready

$('#Control_2').click();

Upvotes: 1

Pranay Rana
Pranay Rana

Reputation: 176896

Edit : one more thing you are pointing to url which is works for A tag not for Span tag, Jquery how to trigger click event on href element this is for A tag which you mention in your question.

there is on issue if you are triggring the click event than you should bind click event with the span than use trigger function to trigger it

Write click event

$('#aa').click( function() 
    {
             alert('span clicked');
   });

Trigger event than

$('#aa').trigger("click");

Upvotes: 1

James Allardice
James Allardice

Reputation: 165941

Your first try gave you a 404 because you tried to change the URL to just #inbox. I'm assuming you actually wanted to append the hash to your current URL, in which case you can use the location.hash property:

window.location.hash = href;

I think you may also want to use an a element instead of a span, since then it will have this behaviour by default and you won't have to bind click events to handle it.

Upvotes: 3

Related Questions