JqueryUI dialog on open handles onclick event with old target instance
<pre class="lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a data-id="1" href="#"&gt;Show dialog 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-id="2" href="#"&gt;Show dialog 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-id="3" href="#"&gt;Show dialog 3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-id="4" href="#"&gt;Show dialog 4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-id="5" href="#"&gt;Show dialog 5&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-id="6" href="#"&gt;Show dialog 6&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="dialogTest" style="display: none"&gt;
&lt;p&gt;Are you shure you want to delete this link?&lt;/p&gt;
&lt;p style="margin-top: 15px; text-align: center;"&gt;&lt;button&gt;Delete it!&lt;/button&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class="dialogTestMenu" style="display: none"&gt;
&lt;p style="margin-top: 15px; text-align: center;"&gt;&lt;a href="#"&gt;Delete this link&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<pre class="lang-js prettyprint-override"><code>$(function () {
    var ulMenu = function (target) {

    console.log('target item',target);

    $('.dialogTestMenu').dialog({
        title: 'Item #' + target.dataset.id + ' menu',
        modal: true,
        open: function () {
            var rootDialog = this;

            $(this).find('a').on('click', function () {
                $(rootDialog).dialog('close');

                $('.dialogTest').dialog({
                    title: 'Confirm delete #' + target.dataset.id,
                    modal: true,
                    open: function () {
                        var selfDialog = this;
                        $(this).find('button').on('click', function () {
                            console.log('target item to delete',target);
                            $(target).remove();
                            $(selfDialog).dialog('close');
                            return false;
                        });
                    },
                    buttons: {
                        Cancel: function () {
                            $(this).dialog('close');
                            $(rootDialog).dialog('open');
                        }
                    }
                });
                return false;
            });
        },
        buttons: {
            Cancel: function () {
                $(this).dialog('close');
            }
        }
    });

    };

    $('ul a').on('click', function () {
        ulMenu(this);
        return false;
    });
});
</code></pre>

<p>I have a list of items. Click on item calls dialog with menu . By clicking on menu item <strong>Delete this link</strong> I get another dialog with confirmation. When I cancel from the second dialog to delete first item (for example), and then I try to delete any other item, it deletes the first, which was cancelled.</p>

<p>Explain me, why do I get an old instance of <strong>target</strong>, when I try to handle click on button inside the second dialog.</p>

<p><a href="http://jsfiddle.net/InsideZ/m5Kwp/1/" rel="nofollow">Check out code</a>, fill free to use console.</p>
