Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Ryan is correct in jQuery being additive, although if you find there are problems because you are chaining the same event, beautiful jQuery allows another approach, and that is calling the second function within the first after completion of the first as shown below.</p> <pre><code>$('input:checkbox').change(function() { // Do thing #1.; &lt;-- don't forget your semi-colon here (function() { // Do thing #2. }); }); </code></pre> <p>I use this technique frequently with form validation, one function for checking and replacing disallowed characters input, and the second for running a regex on the results of the parent function.</p> <p>Update to Post:</p> <p>OK... You all are quick to beat on me with your negative scores, without understanding the difference in how we each view Mark's request. I will proceed to explain by example why my approach is the better one, as it allows for the greatest flexibility and control. I have thrown up a quick example at the link below. A picture's worth a 1000 words.</p> <p><a href="http://www.cooscurryclassifieds.com/stackoverflow/Nested_Change_Event.html" rel="nofollow noreferrer">Nested Functions on One Event Trigger</a></p> <p>This example shows how you can tie in three functions to just one change event, and also how the second and third functions can be controlled independently, even though they are still triggered by the parent change event. This also shows how programmatically the second and third functions can BOTH be tied into the same parent function trigger, yet respond either with or independently (see this by UNCHECKING the checkbox) of the parent function it is nested within.</p> <pre><code>$('#thecheckbox').change(function() { $("#doOne").fadeIn(); if ($('#thecheckbox').attr('checked')) { doFunc2() } else { doFunc3() }; function doFunc2() { $("#doTwo").fadeIn(); return true; } function doFunc3() { $("#doTwo").fadeOut(); return true; } $("#doThree").fadeIn(); }); </code></pre> <p>I've included the third 'Do thing #3 in the example, to show how yet another event can follow the two nested functions as described earlier.</p> <p>Forgive the earlier bad pseudocode originally posted first, as I always use ID's with my jQuery because of their ability to give everything an individual status to address with jQuery. I never use the 'input:checkbox' method in my own coding, as this relies on the 'type' attribute of an input statement, and therefore would require extra processing to isolate any desired checkbox if there is more than one checkbox in the document. Hopefully, the example will succeed at articulating what my comments here have not.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload