<p>It appears when a new widget is created it has a variety of classes (such as <code>new</code> and <code>loading-new</code>) that don't exist on established widgets:</p>

<pre><code>class="widget new loading-new myplugin_mywidget flipped last"
</code></pre>

<p>It's also possible to add javascript to the widget settings file that gets rendered for your widgets settings. In the admittedly lame (but illustrative) example below, your new widget will get the text color of red, and after it is saved and the page reloads, no red color will be applied.</p>

<pre><code>{% includejs %}
(function(){
    $('.widget.new.myplugin_mywidget').css('color', 'red');
})();
{% endincludejs %}
</code></pre>

CC BY-SA 3.0
2016-03-29T00:51:36.627Z
2016-03-29T00:51:36.627Z
Ben Parizek
<p>Pretty straightforward problem...</p>

<ol>
<li>On the dashboard, I click "New Widget".</li>
<li>I select "My Custom Widget" type.</li>
<li>A new instance of "My Custom Widget" appears on the dashboard, ready to be edited.</li>
</ol>

<p><strong>How can my widget be self-aware that it has just been created?</strong></p>

<p>I need the widget to perform some very minor JS when it initially loads. Is there an existing JS event which would be triggered in this scenario?</p>

<plugin-development><events><javascript><dashboard-widgets>
Is there a JS event triggered when a new widget is created?
# Is there a JS event triggered when a new widget is created?

(Asked by: username_0 on 2016-02-14)

Pretty straightforward problem...

1. On the dashboard, I click "New Widget".
2. I select "My Custom Widget" type.
3. A new instance of "My Custom Widget" appears on the dashboard, ready to be edited.

**How can my widget be self-aware that it has just been created?**

I need the widget to perform some very minor JS when it initially loads. Is there an existing JS event which would be triggered in this scenario?

**Tags:** plugin-development, events, javascript, dashboard-widgets

---

## 1 answers

### Answer by username_1 on 2016-03-29. Score: 3 | Accepted answer

It appears when a new widget is created it has a variety of classes (such as new and loading-new) that don't exist on established widgets:
class="widget new loading-new myplugin_mywidget flipped last"

It's also possible to add javascript to the widget settings file that gets rendered for your widgets settings. In the admittedly lame (but illustrative) example below, your new widget will get the text color of red, and after it is saved and the page reloads, no red color will be applied.
{% includejs %}
(function(){
    $('.widget.new.myplugin_mywidget').css('color', 'red');
})();
{% endincludejs %}


---

