Why does my first snippit work, but my second doesn't?

Question

I'm trying to bing a click event to a new <div /> in jQuery. The following snippit works (when I click the div, I see the 'clicked' message) however, the second doesn't.

Could anyone tell me why?

Working snippet :

'use strict';

(function () {
    $(document).ready(function () {
        var $display = $('#display'),
            $drawingArea = $('<div />')
                .attr('id', 'drawing-area')
                .click(function() {
                    alert('clicked');
                });

        $display.wrap($drawingArea);
    })
})();

Not working snippet : (The alert 'ready' is fired, but not the click')

'use strict';

(function () {
    $(document).ready(function () {
        var $display = $('#display'),
            $drawingArea = $('<div />')
                .attr('id', 'drawing-area');
        $display.wrap($drawingArea);

        $drawingArea.ready(function() {
            alert('ready');
            $drawingArea.click(function() {
                alert('clicked');
            })
        });

    })
})();

Update

Just tried the following:

(function () {
    $(document).ready(function () {
        var $display = $('#display'),
            $drawingArea = $('<div />')
                .attr('id', 'drawing-area');
        $display.wrap($drawingArea);

        $drawingArea.ready(function() {
            alert('ready');

        });

        $drawingArea.click(function() {
            alert('clicked');
        })
    })
})();

The 'ready' alert fired, but no 'clicked' alert.

HTML:

<section id="main">
    <svg id="display" xmlns="http://www.w3.org/2000/svg">

    </svg>
</section>

UPDATE 2 Just noticed that, when I click furiously with the chrome dev tools opened this appeads just before the </html>

<div id="gdx-bubble-container">
   <div id="gdx-bubble-main" style="left: 0px; top: 1023.4375px;">
      <div id="gdx-bubble-close"></div>
      <div id="gdx-bubble-query-container" class="gdx-display-block">
         <div id="gdx-bubble-query">not</div>
         <div id="gdx-bubble-audio-icon" class="gdx-display-block"></div>
         <div id="gdx-bubble-query-container-end"></div>
      </div>
      <div id="gdx-bubble-meaning">Used with an auxiliary verb or “be” to form the negative</div>
      <div id="gdx-bubble-options-tip" class="gdx-display-block">Tip: Didn't want this definition pop-up? Try setting a trigger key in <a href="chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/options.html" target="_blank">Extension Options</a>.</div>
      <div id="gdx-bubble-attribution" class="gdx-display-none">
         <a target="_blank"></a>
         <div></div>
      </div>
      <div id="gdx-bubble-more" class="gdx-display-block"><a target="_blank" href="http://www.google.com/search?q=define+not">More »</a></div>
   </div>
   <div id="gdx-arrow-container">
      <div id="gdx-arrow-main" style="top: 1145.4375px; left: 10px;">
         <div id="gdx-bubble-arrow-inner-down"></div>
         <div id="gdx-bubble-arrow-outer-down"></div>
      </div>
   </div>
</div>

Answer 1

The answer lies within the functionality of .wrap():

The .wrap() function can take any string or object that could be passed to the $() factory function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. A copy of this structure will be wrapped around each of the elements in the set of matched elements.

In other words when you say $display.wrap($drawingArea); you're creating a copy of $drawingArea. When you later add the click event to it, it won't be added to the copy which is actually in the DOM.

The first snippet works because you're adding the click event before the .wrap() operation, so the click event is copied along with the rest of the element.