我正在尝试将点击事件发送到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开启工具时,我们点击了</html
&gt;
<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>
答案 0 :(得分:5)
答案在于.wrap()
:
.wrap()函数可以接受任何可以传递给$()工厂函数的字符串或对象来指定DOM结构。这个结构可以嵌套几层深,但应该只包含一个inmost元素。 此结构的副本将围绕匹配元素集中的每个元素。
换句话说,当您说$display.wrap($drawingArea);
时,您正在创建$drawingArea
的副本。当您稍后向其添加click事件时,它将无法添加到实际位于DOM中的副本。
第一个代码段有效,因为您在 .wrap()
操作之前添加了单击事件,因此click事件将与元素的其余部分一起复制。
答案 1 :(得分:0)
正如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');
})
});
})
})();
答案 2 :(得分:-2)
这里缺少分号:
drawingArea.click(function() {
alert('clicked');
});
---^