jQuery function used as event handler and for initialization

Question

I'm doing this over and over, and I'm not sure if it is the best way to do so in JavaScript/jQuery. I have a function that acts as an event handler, but also I need to call it on page initialization. Thus I have been using the following code:

<script type="text/javascript">
    $(function() {
        function doToggle() {
            $("#toggle-fields").toggle(!$('#checkToggle').is(':checked'));
        }
        doToggle();

        $('#checkToggle').click(doToggle);
    });
</script>

How do you tackle this repetitious situation? Are there any best practices that you can point me toward?

Sorry, was a little too fast with my cut-and-paste, the code I originally put up would not actually work. Concept is still the same though. — DavGarcia
– DavGarcia, Commented Jul 27, 2010 at 4:54
@DavGarcia - does your initialization and handler code always/only manipulate DOM elements as in above example? — Anurag
– Anurag, Commented Jul 27, 2010 at 5:31

Anurag · Accepted Answer · 2010-07-27 04:54:15Z

2

One way to do it is :)

$('#checkToggle').click(doToggle).click();

edited Jul 27, 2010 at 4:54

answered Jul 27, 2010 at 4:47

Anurag

142k37 gold badges223 silver badges262 bronze badges

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

4 Comments

SLaks Over a year ago

Note that this will also trigger other handlers.

Anurag Over a year ago

@SLaks - that's true, but I'm thinking of this from a UI perspective. Put the application in an initial state that it would be in if the element was clicked (which means all attached handlers will indeed run).

SLaks Over a year ago

Good idea. However, if he has non-idempotent handlers, he should be aware of that.

Anurag Over a year ago

@Reigel - Namespacing is definitely not a bad idea at all. In fact, it is a very good idea.

Reigel Gallarde · Accepted Answer · 2010-07-27 04:48:54Z

2

like this...

$(function() {
    $('#checkToggle').bind('click.toggle',function(){
        $("#toggle-fields").toggle(!this.checked);
    }).trigger('click.toggle');
});

answered Jul 27, 2010 at 4:48

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Comments

SLaks · Accepted Answer · 2010-07-27 05:03:06Z

2

Your code will not work because this will be window in the first call.

Change it to

doToggle.call(document.getElementByID('checkToggle'));

edited Jul 27, 2010 at 5:03

answered Jul 27, 2010 at 4:47

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Collectives™ on Stack Overflow

jQuery function used as event handler and for initialization

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related