為什么我的第一個snippit工作，但我的第二個沒有？

Question

我正在嘗試將點擊事件發送到jQuery中的新<div /> 。 以下snippit工作（當我點擊div時，我看到'clicked'消息）但是，第二個沒有。

誰能告訴我為什么？

工作片段：

'use strict';

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

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

不工作的片段:( 警告“准備好”被觸發，但不是點擊'）

'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');
            })
        });

    })
})();

更新

剛試過以下內容：

(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');
        })
    })
})();

“准備好”警報已觸發，但沒有“點擊”警報。

HTML ：

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

    </svg>
</section>

更新2剛剛注意到，當我用chrome dev工具打開時，它突然出現在</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

答案在於.wrap()的功能：

.wrap（）函數可以接受任何可以傳遞給$（）工廠函數的字符串或對象來指定DOM結構。 這個結構可以嵌套幾層深，但應該只包含一個inmost元素。 此結構的副本將圍繞匹配元素集中的每個元素進行包裝。

換句話說，當你說$display.wrap($drawingArea); 你正在創建$drawingArea的副本 。 當您稍后向其添加click事件時，它將不會添加到實際位於DOM中的副本。

第一個代碼片段起作用是因為您在.wrap()操作之前添加了click事件，因此click事件將與元素的其余部分一起復制。

Answer 2

正如Juhana （+1）指出的那樣，創建一個結構的副本，所以你的div $display不會被對象本身包裹。

您可以使用元素$display的父級來使您成為選擇器：

'use strict';

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

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

演示： http ： //jsfiddle.net/5ch9W/1/

Answer 3

你在這里缺少一個分號：

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