<p>As of Craft 2.4.2688:</p>

<blockquote>
  <p>It is now possible to access <code>Craft.BaseElementSelectInput</code> objects
  from their container elements, via <code>.data('elementSelect')</code>.</p>
</blockquote>

<p>On select element:</p>

<pre><code>$('#theElementSelectField').data('elementSelect').on('selectElements', function(e) {
    console.log(e); // Take a look
    // Do stuff here when elements are selected...
});
</code></pre>

<p>On remove element:</p>

<pre><code>$('#theElementSelectField').data('elementSelect').on('removeElements', function(e) {
    console.log(e);
    // Do stuff here when elements are removed...
});
</code></pre>

<p>NB. If you are using the Craft macros to build the select element inputs, make sure your javascript is run after craft has done its magic with the input field.</p>

<hr>

<p>Thanks to Brandon Kelly &amp; Lindsey D</p>

CC BY-SA 3.0
2015-09-28T20:54:06.880Z
Hadn't caught this – awesome!
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-09-28T13:29:54.653Z
2015-09-28T13:29:54.653Z
Sam Hibberd
<p><strong>Edit</strong> 
For Craft installs 2.4.2688 or later, see Sam Hibberd's answer!</p>

<hr>

<p>@AaronBerkowitz is correct – unfortunately there's no way, currently.</p>

<p><a href="https://gist.github.com/mmikkel/e24e379faad6fd3fbde5" rel="nofollow">Here's a workaround</a>, which uses <code>setInterval</code> to poll the elementselects in the DOM for changes. If any of the elementselects have changed, the container will trigger a custom <code>elementselectchange</code> event, which you can listen for:</p>

<pre><code>$('.elementselect').on('elementselectchange', onElementSelectChange);
</code></pre>

<p>This is hardly an elegant or best practice solution, but in this case it's the best I can think of. Instead of polling it might be better to bind a click listener to the elementselect's add/delete buttons, however as elementselects can exist in so many different contexts, writing a reliable event listener is really tricky. In any case, should P&amp;T add a "elementChange" event or the like down the line, you'd likely be able to rip out the poller and keep your event handler.</p>

<p>The code in the Gist can be copy pasted as-is to a JS file and added to the Craft CP like this (in your plugin's main class):</p>

<pre><code>if (!craft()-&gt;request-&gt;isAjaxRequest() &amp;&amp; craft()-&gt;request-&gt;isCpRequest())
{
    craft()-&gt;templates-&gt;includeJsResource('myplugin/js/elementSelectChange.js');
}
</code></pre>

<p>The test for AJAX requests is important, if you leave it out the script will execute every time an Assets modal opens etc, which will make your event handlers fire multiple times.</p>

CC BY-SA 3.0
2015-09-25T21:16:25.010Z
This is possible without a workaround, I'm currently away but will post the detailed solution over the weekend.
Sam Hibberd
CC BY-SA 3.0
2015-09-25T21:17:06.163Z
@SamHibberd Awesome!
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2015-09-24T08:38:41.560Z
2015-09-28T20:55:57.067Z
2015-09-28T20:55:57.067Z
Mats Mikkel Rummelhoff
<p>Is there any way to access an event, and trigger some function, when an element is added / removed with the Craft Element Selector logic available in Garnish?</p>

<p>I am working on a custom field type and to keep everything tidy I only want to show a set of options when an asset is selected. </p>

<p><a href="https://i.sstatic.net/HWEN1.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/HWEN1.png" alt="Example"></a></p>

CC BY-SA 3.0
2015-09-24T03:45:40.967Z
There is no built-in way to tap into these front-end events. I recommend adding this as a [feature request](http://feedback.buildwithcraft.com/forums/285221-feature-requests)!
Aaron Berkowitz
<plugin-development><javascript><garnish>
Access add and remove events with the Craft Element Selector?
# Access add and remove events with the Craft Element Selector?

(Asked by: username_0 on 2015-09-23)

Is there any way to access an event, and trigger some function, when an element is added / removed with the Craft Element Selector logic available in Garnish?

I am working on a custom field type and to keep everything tidy I only want to show a set of options when an asset is selected.

[![Example](https://i.sstatic.net/HWEN1.png)](https://i.sstatic.net/HWEN1.png)

**Tags:** plugin-development, javascript, garnish
> **Comments:**
> **username_1**: There is no built-in way to tap into these front-end events. I recommend adding this as a [feature request](http://feedback.buildwithcraft.com/forums/285221-feature-requests)!  

---

## 2 answers

### Answer by username_0 on 2015-09-28. Score: 7

As of Craft 2.4.2688:

It is now possible to access Craft.BaseElementSelectInput objects
  from their container elements, via .data('elementSelect').

On select element:
$('#theElementSelectField').data('elementSelect').on('selectElements', function(e) {
    console.log(e); // Take a look
    // Do stuff here when elements are selected...
});

On remove element:
$('#theElementSelectField').data('elementSelect').on('removeElements', function(e) {
    console.log(e);
    // Do stuff here when elements are removed...
});

NB. If you are using the Craft macros to build the select element inputs, make sure your javascript is run after craft has done its magic with the input field.

Thanks to Brandon Kelly & Lindsey D

> **Comments:**
> **username_2**: Hadn't caught this – awesome!  

---

### Answer by username_2 on 2015-09-24. Score: 2

Edit 
For Craft installs 2.4.2688 or later, see Sam Hibberd's answer!

@AaronBerkowitz is correct – unfortunately there's no way, currently.
Here's a workaround, which uses setInterval to poll the elementselects in the DOM for changes. If any of the elementselects have changed, the container will trigger a custom elementselectchange event, which you can listen for:
$('.elementselect').on('elementselectchange', onElementSelectChange);

This is hardly an elegant or best practice solution, but in this case it's the best I can think of. Instead of polling it might be better to bind a click listener to the elementselect's add/delete buttons, however as elementselects can exist in so many different contexts, writing a reliable event listener is really tricky. In any case, should P&T add a "elementChange" event or the like down the line, you'd likely be able to rip out the poller and keep your event handler.
The code in the Gist can be copy pasted as-is to a JS file and added to the Craft CP like this (in your plugin's main class):
if (!craft()->request->isAjaxRequest() && craft()->request->isCpRequest())
{
    craft()->templates->includeJsResource('myplugin/js/elementSelectChange.js');
}

The test for AJAX requests is important, if you leave it out the script will execute every time an Assets modal opens etc, which will make your event handlers fire multiple times.

> **Comments:**
> **username_0**: This is possible without a workaround, I'm currently away but will post the detailed solution over the weekend.  
> **username_2**: @SamHibberd Awesome!  

---

