Trigger element's onclick method with JQuery [ASP.NET]

Question

I have an ASP.NET server control that inherits from CheckBoxList that renders the controls with a UL and LIs. The control is set to AutoPostBack.

Markup:

<div id="foo">
    <ul>
        <li>
            <input id="..." 
                   type="checkbox" 
                   name="ctl00$MainContent$FooList$0"    

                   onclick="javascript:setTimeout(
                   '__doPostBack(\'ctl00$MainContent$FooList$0\',\'\')', 0)" />

            <label ...>...</label>
        </li>
        ...
    </ul>
</div>

I would like to trigger the JavaScript that is rendered on the CheckBox when the parent LI is clicked. Here is what I have so far:

$("#foo li").click(function() {
    $(this).find("input:eq(0)").trigger("click");
});

This fires a postback in FF 3.x but the event handler in the codebehind is not fired. In IE 7 a script error comes up and the browser just kind of hangs there for a bit then reloads the page.

How should I be doing this?

Nick Craver · Accepted Answer · 2010-04-16 14:18:29Z

1

I'd give this a try:

$("#foo li").click(function() {
    $(this).find("input:eq(0)").triggerHandler("click");
});

A trigger on a child will bubble to the parent, resulting in a loop in this case since the parent click is again firing the child click. Firefox sometimes recognizes and stops this, but the result is your box is checked, it bubbles, it's unchecked and so on postback, it's not firing because the check status really didn't change.

.triggerHandler() however won't bubble, and might resolve your issue (unless there's another script error occuring!). As a general rule, use this when triggering the handlers on a child, especially triggering the same event on the child that would bubble.

answered Apr 16, 2010 at 14:18

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

14 Comments

blu Over a year ago

The script fires properly in both browsers now, thanks for the explanation. Unfortunately the ASP.NET event handler is not being triggered. I don't know if ASP.NET is your thing, but if it is any ideas?

Nick Craver Over a year ago

@blu - Are you clicking on the checkbox when this happens, or the <li>? If clicking on the <li> this would still toggle the checkbox, bubble up once (the original click) and toggle it back...does it work when clicking anywhere in the <li> that's not the checkbox?

blu Over a year ago

@Nick Craver - The checkbox functions normally. Clicking the li causes a postback, does not toggle the selected state of the CheckBox, and does not cause the EventHandler to fire.

Nick Craver Over a year ago

@blu - Can you update with the full version of your input's onclick?

blu Over a year ago

@Nick Craver - I updated the existing markup in the question. Thanks for looking at it.

|

Collectives™ on Stack Overflow

Trigger element's onclick method with JQuery [ASP.NET]

1 Answer 1

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related