为什么我的第一个截图有效，而我的第二个截图不起作用

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

本文关键字：我的 第二个 不起作用 有效 为什么 第一个      更新时间：2023-09-26

我正在尝试将点击事件转换为jQuery中的新<div />。 以下截图有效（当我单击div 时，我看到"单击"消息），但是第二个截图不起作用。

谁能告诉我为什么？

工作片段： 

'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 开发工具疯狂点击时，在</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>

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

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

换句话说，当您说$display.wrap($drawingArea);时，您正在创建$drawingArea的副本。稍后将 click 事件添加到其中时，它不会添加到实际位于 DOM 中的副本中。

第一个代码段之所以有效，是因为您要在.wrap()操作之前添加 click 事件，因此 click 事件将与元素的其余部分一起复制。

正如 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/

您在此处缺少分号：

        drawingArea.click(function() {
            alert('clicked');
        });
       ---^
相关文章：