3 Interact on Change Event

Description

In this example we will show you how to initiate an interaction when a certain element has changed.

Note: We are using events built in to this API. No JavaScript is required.

You can preview the HTML code section. While the button holds the parameters, and the card holds placement options. On the other hand the interaction is triggered once the card has changed.

<div data-fs-sequence="example-on-change">
  
    <div 
         class="card"
         data-fs-change="trigger-example-interaction"
         data-fs-el="@module-2410d449e70cdb75a0fccd29e7880c17" 
         data-fs-opt='{ 
            "placement": "right-end", 
            "theme": "white-translucent", 
            "size": "md",
            "left": 580,
            "down": 32
        }'>
      <div class="card-body p-5"></div>
	</div>
<button
    type="button"
    id="add-class-button"
    data-fs-etag="onchange:trigger-example-interaction" 
    data-fs-params='{ 
        "trigger": {
            "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17"
         },
         "rel": {
             "interaction": {
                    "subject":"Example Interaction",
                    "description": "This interaction was triggered when something changed within this element."
             }       
          }
    }'
    class="btn btn-primary">Click to change the card above. </button>
</div>