jquery - 如何使用 jquery 为 html 标记变量绑定事件？

Question

假设我有一个存储 html 标记的变量：

var $content=$("<div id='test'></div>")

然后我想给它一个点击事件，并将其附加到正文元素

$content.click(function(){
    console.log('click!');
});

$content.appendTo($('body'))

但是它不起作用，我怎样才能使它成为可能？

score 0 · Accepted Answer

click处理程序设置得很好。问题是，对于一个完全空的 div，它的高度为0（除非您在未显示的某处进行了样式设置），因此您无法找到它来单击它。零高度示例| 来源。

解决方案是将内容放在 div 中，或者赋予其样式以赋予其高度：

var $content=$("<div id='test'>I'm the div!</div>");
$content.click(function(){
    console.log('click!');
});
$content.appendTo($('body'));

JavaScript：

var $content=$("<div id='test'></div>");
$content.click(function(){
    console.log('click!');
});
$content.appendTo($('body'));

CSS：

#test {
    height: 20px;
    border: 1px solid black;
}

边注：

假设我有一个存储 html 标记的变量：

var $content=$("<div id='test'></div>");

请注意，您没有存储 HTML 标记。通过使用 HTML 标记调用 jQuery，您是在告诉 jQuery 创建相关的 DOM 元素并将它们包装在一个 jQuery 实例中。

要将标记存储在变量中，您只需存储包含标记的字符串：

var content="<div id='test'></div>";

标记是文本；元素是对象。

更新：在下面回复您的评论：

我在 jquery 插件 js 文件中编写了这段代码......它有什么问题吗？

如果您的代码在有body要附加的元素之前运行，这很重要；如果没有元素，您的最后一行将失败body（例如，如果您的代码在加载时立即运行，并且它是从head元素加载的）。如果该body元素在您运行代码时存在，那应该没问题。

1 回答 1