Javascript 为什么我的第一个snippit有效，而我的第二个snippit无效'；T

我正在尝试将单击事件bing到jQuery中的新

。下面的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);
    })
})();

“严格使用”；
（功能（）{
$（文档）.ready（函数（）{
变量$display=$（“#display”），
$drawingArea=$（''）
.attr（'id'，'drawing area'）
。单击（函数（）{
警报（“点击”）；
});
$display.wrap（$drawingArea）；
})
})();

无效代码段：（已触发警报“就绪”，但未触发“单击”）

“严格使用”；
（功能（）{
$（文档）.ready（函数（）{
变量$display=$（“#display”），
$drawingArea=$（''）
.attr（'id'，'drawing area'）；
$display.wrap（$drawingArea）；
$drawingArea.ready（函数（）{
警报（“准备就绪”）；
$drawingArea.单击（函数（）{
警报（“点击”）；
})
});
})
})();

更新

刚刚尝试了以下方法：

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

（函数（）{
$（文档）.ready（函数（）{
变量$display=$（“#display”），
$drawingArea=$（''）
.attr（'id'，'drawing area'）；
$display.wrap（$drawingArea）；
$drawingArea.ready（函数（）{
警报（“准备就绪”）；
});
$drawingArea.单击（函数（）{
警报（“点击”）；
})
})
})();

已触发“就绪”警报，但没有“单击”警报

HTML：

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

    </svg>
</section>

更新2 刚刚注意到，当我疯狂地点击chrome开发工具时，就在

不
与助动词或“be”连用，构成否定词
提示：不希望出现此定义弹出窗口？尝试在中设置触发键。
此处缺少分号：

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

答案在于以下功能：

.wrap（）函数可以接受可以传递给$（）工厂函数的任何字符串或对象，以指定DOM结构。该结构可以嵌套在多个层次的深处，但应该只包含一个最里面的元素此结构的副本将环绕匹配元素集中的每个元素

换句话说，当你说
$display.wrap（$drawingArea）
您正在创建
$drawingArea
的副本。稍后向其中添加click事件时，它不会添加到DOM中的副本中

第一个代码段之所以有效，是因为您在
.wrap（）
操作之前添加了click事件，因此click事件将与元素的其余部分一起复制。
正如（+1）wrap中指出的那样，创建结构的副本，因此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');
            })
        });
    })
})();

“严格使用”；
（功能（）{
$（文档）.ready（函数（）{
变量$display=$（“#display”），
$drawingArea=$（''）
.attr（'id'，'drawing area'）；
$display.wrap（$drawingArea）；
$display.parent（）.ready（函数（））{
警报（“准备就绪”）；
$display.parent（）。单击（函数（））{
警报（“点击”）；
})
});
})
})();

演示：
您是否尝试取出$drawingArea。单击（函数（）{来自$drawingArea.ready？div中有什么？如果div是空的，就没有什么可点击的。@LiadLivnat第一个例子就是这样做的，但是当问题是为什么它不起作用时，这并不重要。@Janvladimimermoster
div
中有一个
svg
，我将把HTML添加到question.FYI中，绑定一个
re
$drawingArea
的ady
侦听器是多余的，因为它包含在您的
$（文档）中.ready
处理程序已执行。即使在严格模式下，我也不知道Javascript allowes缺少
；
。不是downvoter，但这不是问题所在，在某些情况下，分号可以省略-它们会在代码运行时自动插入。这可能会导致问题，因此这不是最佳做法，这里有一篇好文章：Awesome点点！谢谢
        drawingArea.click(function() {
            alert('clicked');
        });
       ---^

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