Cannot get click event fire in jQuery?

Question

Here's the piece of my HTML code:

<li>
    <a id="section1" href="#" onclick="return false">&raquo; Section 1</a>
    <ul>
        <li><a href="link1.html" target="showframe" id="tab1" name="tab1">Tab 1</a></li>
        <li><a href="link2.html" target="showframe" id="tab2" name="tab2">Tab 2</a></li>
    </ul>
</li>

It is actually an jQuery Accordion. Now the line $('#section1').click(); or $('#'+section).click(); works, both on IE and Chrome. For inner Anchor tags, I tried using:

$('a#'+tab_name_from_querystring).click();

$('a[name="'+ tab_name_from_querystring+'"]').click();

$('a#tab1').click();

All these don't work in any browser. If I use this:

document.getElementById(tab_name_from_querystring).click().

It works in IE only, not in Chrome.

Any help please?

UPDATE: Here's the complete JavaScript code:

<script type="text/javascript">
    var query = window.location.search.substring(1);
    var params = query.split('&');
    var temp = params[0].split('=');
    var section = temp[1].toLowerCase();
    temp = params[1].split('=');
    var tab = temp[1].toLowerCase();
    $(document).ready(function(){
        $('#'+section).click();
        setTimeout(function(){
            $("a[name='tab1']").click();  // Did not work
            $('a[name="'+tab+'"]').click(); // Did not work
            document.getElementById(tab).click(); // Works only in IE
        }, 500);

    });
</script>

Are you sure tab_name_from_querystring is 'tab1' or 'tab2'? — abuduba
– abuduba, Commented Dec 26, 2011 at 19:09
Yes. As I said, it is working in IE using document.getElementById() — Kumar Kush
– Kumar Kush, Commented Dec 26, 2011 at 19:13
@Bergi: I do not get any error. If I put an alert() after the .click() statement, I do get an alert. — Kumar Kush
– Kumar Kush, Commented Dec 26, 2011 at 19:24
Could you please check what content $("a[name='tab1']") has (which length, which elements)? We need to know if the problem comes from matching your element or from firing the event. — Bergi
– Bergi, Commented Dec 26, 2011 at 19:29

3 revs · Accepted Answer · 2011-12-26 19:54:19Z

1

Remove the a before #

Something like:

 $('#'+ tab).click();

It works on jsFiddle, view it here

edited Dec 26, 2011 at 19:54

community wiki

3 revs
Emmanuel N

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

2 Comments

Kumar Kush Over a year ago

I am surprised to see simple statements like $('#tab1').click() is not working.

Emmanuel N Over a year ago

$("#"+tab).click(); is equal top document.getElementById(tab).click();

abuduba · Accepted Answer · 2011-12-26 19:40:13Z

0

Maybe you need that:

window.location.href = $( "a#tab1" ).attr( "href" );

edited Dec 26, 2011 at 19:40

answered Dec 26, 2011 at 19:10

abuduba

5,0637 gold badges29 silver badges43 bronze badges

5 Comments

Kumar Kush Over a year ago

Tried. No help. I don't understand why document.getElementById() is not working on Chrome. On a normal day, it never is a problem firing event using jQuery and JavaScript.

Kumar Kush Over a year ago

Thanks a lot. That worked both on IE and Chrome. Did not think of using that technique.

Kumar Kush Over a year ago

Now that my problem is solved, does anyone have an idea that how come click event of Anchor tag was is not firing? Logically, it should. And why document.getElementById(tag).click() did not work in Chrome?

Kumar Kush Over a year ago

This is an invalid syntax. It is always .click()

abuduba Over a year ago

Take a look. https://developer.mozilla.org/en/DOM/element.dispatchEvent

kvc · Accepted Answer · 2011-12-26 19:05:28Z

0

Try using

$(selector).trigger("click");

answered Dec 26, 2011 at 19:05

kvc

1,1372 gold badges7 silver badges21 bronze badges

Comments

John McLaughlin · Accepted Answer · 2011-12-26 19:05:51Z

0

Since you have IDs on your links, have you tried:

$('#'+tab_name_from_querystring).click();

or

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

answered Dec 26, 2011 at 19:05

John McLaughlin

112 bronze badges

3 Comments

Kumar Kush Over a year ago

Yes, I tried that. Strangely, it is not firing. Where as on a "normal" day, anything above and this would work.

John McLaughlin Over a year ago

Are you actually teling the click event to do something? For example: $('#tab1').click(function() { alert('click() called.'); });

Kumar Kush Over a year ago

No. As you see in the Anchor tag, the click event should open the page specified in the HREF attribute should be opened in an IFRAME with id showframe.

Kumar Kush · Accepted Answer · 2011-12-27 05:18:19Z

0

All right. As per the hint by abuduba, the following code worked:

$('iframe[name="showframe"]').attr('src', $("a[name="+tab+"]").attr('href'));

That is, copy the value of the HREF attribute of the Anchor tag to SRC attribute of the desired IFRAME.

Thanks every one

answered Dec 27, 2011 at 5:18

Kumar Kush

2,57211 gold badges32 silver badges44 bronze badges

Collectives™ on Stack Overflow

Cannot get click event fire in jQuery?

5 Answers 5

2 Comments

5 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

5 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related