0

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

Community
  • 1
  • 1
Débora
  • 5,816
  • 28
  • 99
  • 171
  • Put the event into a function and call it as many time's as you need it. Also, I'd say it was bad practice to include the hash sign inside an alt tag, due to the hash defining the ID element of elements in HTML. – Ryan Brodie Apr 19 '12 at 12:25
  • Note that 'alt' is an invalid attribute for the SPAN element. You should use an anchor (A) instead; this has the added benefit that you can provide a meaningful target for those users without javascript. – Bobby Jack Apr 19 '12 at 12:29
  • If you can describe the original problem you are trying to solve, people will be able to suggest better ways of doing it. What is it that you're actually trying to achieve? – Bobby Jack Apr 19 '12 at 12:34
  • Extremely sorry if you are in trouble when understanding my problem.I add some note again as 'edit' – Débora Apr 19 '12 at 14:31

4 Answers4

3

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.

James Allardice
  • 164,175
  • 21
  • 332
  • 312
  • Thanks for the tip, didn't know about this one! – Tobias Apr 19 '12 at 12:27
  • @James. Thank you very much. I replaced span with a tag including `href` and tried as you mentioned `window.location.hash = href;`. But still it did't work. I updated my problem to be more clear. – – Débora Apr 19 '12 at 15:09
1

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");
Community
  • 1
  • 1
Pranay Rana
  • 175,020
  • 35
  • 237
  • 263
  • Thank you Pranay. I edited my question again. Also a click event is already written for each `li`'s `span` tag. $('#aa').click( function() { //do stuff here } but didn't work – Débora Apr 19 '12 at 14:34
1

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();
Muhammet Göktürk Ayan
  • 376
  • 1
  • 2
  • 20
1

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>
bygrace
  • 5,868
  • 1
  • 31
  • 58
  • I wanted to execute a function which was bound to the `li`s `a` tag. Any way, that function is not executed in all ways mentioned all answers to my question :( . Thank you very much for your codes and your first code lines also were tried and my destination method wasn't called. – Débora Apr 19 '12 at 17:10
  • It sounds like what you want to use is my second example. If you want a function to fire when your li's anchor tag is clicked then you just need to create a selector that targets them and then bind a click event to them as I did here: $('#nav a').click(function() { doStuff(this); }); I targeted the anchor tags that were children of the element with id 'nav'. In my case the UL has the id 'nav'. The code works. If you can't get it to work then it might be beneficial for you to paste the code you are trying so we can look at it. – bygrace Apr 19 '12 at 17:17