jQuery:插入 DOM 元素并附加事件

Question

我正在开发 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”的 3 个元素。生成的 HTML 正确显示这些标题，但无论我单击哪个标题元素，警报框都只显示“Title3”。

有什么想法吗？

额外信息

我提供了一些额外的信息来帮助解决这个问题。我正在创建一个基本的扩展器插件来尝试掌握 JQuery 插件开发。

HTML 元素示例:

<div class="MyExpander" title="Title1">
    This is my expanders content
</div>

JS 创建 JQuery 扩展器:

$(".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);

Answer 1

编辑:出现此行为的原因是忘记将 var 与函数局部变量一起使用。如果不使用 var 则会创建全局变量。

因此，click() 函数中的 $this 是全局函数，而不是您在 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"));
  });
});​