Sandbox: JavaScript

A generic handler for invoking element methods on any element.

The Invoke Delegator has a sister implementation in Behavior.Invoke (see docs / examples). This delegator is the prefered use. See the docs for Behavior.Invoke for appropriate usage.

Examples

The example below shows two uses of this filter. First, on the top level element, you can see how the pattern works when you use a parent element to watch for events on child elements. This allows a form to watch for changes on all its inputs, for example.

But the other use is a specific element that, when interacted with, invokes the desired method. I.e. click this button and change that element over there. Here there's no delegation and the event target is the element with the filter.

<div class="example">
      <div class="form-group">
        <label for="one">This turns red when you change it</label>
        <input id="one" type="text" class="form-control"/>
      </div>
      <button type="submit" class="btn btn-default" data-trigger="invoke"
        data-invoke-options="
          'action': 'addClass',
          'args': ['red'],
          'targets': '!div.example input'
        ">Clicking me turns the input red</button>
      <button type="submit" class="btn btn-default" data-trigger="invoke"
        data-invoke-options="
          'action': 'removeClass',
          'args': ['red'],
          'targets': '!div.example input'
        "
      >Clicking me turns the input white again</button>
    </div>

Delegator Options

These options apply only to the data- tag invocation.

Name type default description
action string ~ What method to invoke. This can be any element method. This includes all the MooTools Element methods and, for that matter, any element shortcuts (such as Fx.Tween's .tween method) including methods you add to the Element prototype yourself.
args array ~ The arguments passed to the method. If you don't want to pass any arguments, you still need to specify an (empty) array.
targets string ~ The selector to find elements to invoke the method on.