Override return value in event handler?
<p>I'm sure this has been asked before, but I haven't had any luck finding an answer. There's probably a term for this which I don't know.</p>

<p>Can a jQuery event handler return an element other than the one from which it was triggered?</p>

<p>Normally, when you trigger a jQuery event for an element, that element will be returned by the event handler. Is there a way to return a different element instead? (other than <code>event.target</code>, <code>event.currentTarget</code>, etc.)</p>

<p>Here's my HTML:</p>

<pre><code>&lt;div id="content"&gt;
    &lt;div id="wrapper"&gt;
        &lt;div class="instance"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>If I make a custom jQuery event for <code>#wrapper</code>, can I make its event handler return an <code>.instance</code>?</p>

<p>Here's my JavaScript:</p>

<pre class="lang-js prettyprint-override"><code>$('#content').on('new.instance', '#wrapper', function(event) {
    var wrapper = $(event.currentTarget);
    var instance = wrapper.find('div.instance').first();

    var newInstance = instance.clone(true, true);
    newInstance.appendTo(wrapper);

    return newInstance;
});

var returnValue = $('#wrapper').trigger('new.instance');
console.log('returnValue.html():', returnValue.html()); // #wrapper, not .instance
</code></pre>

<p>Can I make the <code>new.instance</code> event handler return an <code>.instance</code> element? If so, what am I missing in the code?</p>