jQuery:插入DOM元素和附加事件
jQuery:插入DOM元素和附加事件
提问于 2010-09-17 16:44:21
我正在开发一个JQuery插件，在创建DOM元素和将单击事件附加到它们时，我遇到了问题。我创建DOM元素的代码如下所示：
return this.each(function () {
$this = $(this);
$("<div class=\"" + settings.headingClass + "\">" + $this.attr("title") + "</div>").insertBefore($this).click(function () {
alert($this.attr("title"));
});
});在页面上呈现时，$this.attr("title")的值是正确的，每个元素都会触发单击事件，但是警报框总是显示最后一个元素的$this.attr("title")值。
示例：
我的插件正被应用到三个标题为"Title1“、"Title2”和"Title3“的元素上。生成的HTML正确地显示这些标题，但是警报框只显示"Title3“，无论我单击哪个标题元素。
有什么想法吗？
额外信息
我提供了一些额外的信息来帮助解决这个问题。我正在创建一个基本的扩展插件来尝试并掌握JQuery插件的开发。
HTML元素示例：
<div class="MyExpander" title="Title1">
This is my expanders content
</div>创建JQuery扩展程序的JS：
$(".QuizExpander").expander({
"headingClass": "ExpanderHeading"
});到目前为止，插件代码：
(function ($) {
$.fn.expander = function (options) {
var settings = {
"headingClass": "",
};
if (options) {
$.extend(settings, options);
}
return this.each(function () {
$this = $(this);
$("<div class=\"" + settings.headingClass + "\">" + $this.attr("title") + "</div>").insertBefore($this).click(function () {
alert($this.attr("title"));
});
});
};)(JQuery)；
Stack Overflow用户
回答已采纳
发布于 2010-09-17 17:15:08
编辑：导致这种行为的原因是忘记了在函数局部变量中使用var。如果不能使用var，则会创建全局变量。
因此，您在$this函数中的click()是全局函数，而不是在each()中定义的。
原始答案：您的代码有一些明显的问题，但原则上它应该能工作(至少对我来说是这样，参见http://jsfiddle.net/CpeNM/)。
您的代码示例要么遗漏了相关部分，要么我误解了这个问题。总之，我认为您的代码总体上是错误的：
return this.each(function () {
// ALWAYS!!! use the var keyword for local variables (or global ones will be created)
var $this = $(this);
// use the jQuery functions to modify new DOM objects, avoid string-building
var $div = $("<div>").addClass(settings.headingClass).attr("title", $this.attr("title"));
$div.insertBefore($this).click(function () {
// theoretically you could use 'alert($(this).text());' here
alert($this.attr("title"));
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3737277
复制相关文章
相似问题
腾讯云开发者
