jQuery：插入DOM元素並附加事件

我正在研究一個JQuery插件，並且在創建DOM元素和附加一個單擊事件時遇到問題。我創建的DOM元素代碼如下所示：當頁面和但是每個元素click事件觸發上呈現jQuery：插入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")的價值最後的元素。

實施例：

我的插件正被施加到與標題「標題1」，「標題2」和「TITLE3」 3個元素。生成的HTML將正確顯示這些標題，但無論點擊哪個標題元素，警報框都只顯示「標題3」。

任何想法？

額外信息

我提供一些額外的信息，以幫助這一點。我正在創建一個基本的擴展器插件來嘗試使用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的）;

來源

2010-09-17 Jason

編輯：你這種行爲的原因是忘記使用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")); 
    }); 
});

來源

2010-09-17 17:15:08 Tomalak

$ this變量缺失導致問題。所以這是全局變量的問題。說得通！ – Jason 2010-09-17 17:30:42

@Jason：關於「避免字符串構建」部分：除非你處於非常高需求的循環中，這會顯着地阻止用戶界面，否則你應該更喜歡使用DOM方法（和他們的jQuery包裝器）來構建DOM對象。連接來自字符串的複雜HTML只是太簡單了。在jQuery中，它比替代選項更加醜陋。 – Tomalak 2010-09-17 17:41:28

在this.each()的每個低谷中，$this被覆蓋。所以，你不得不說這樣的事情（如果以下this是一個jQuery對象，否則你就必須換一個$()周圍）：

return this.before(
    $('<div class="' + settings.headingClass + '">' + this.attr("title") + '</div>') 
    .click(function() { 
    alert(this.attr("title")); 
    }); 
});

來源

2010-09-17 16:53:16 elektronikLexikon

@elektronik：這將工作，但並不能解釋爲什麼OP首先看到的問題。 ;-) – Tomalak 2010-09-17 17:43:18

return this.each(function() { 
    $this = $(this); 
    $("div", $(this)).live('click', function() { 
     alert($this.attr("title")); 
    }); 

    $("<div class=\"" + settings.headingClass + "\">" + $this.attr("title") + "</div>").insertBefore($this); 
});

基本上，我是分裂成兩個電話。 live（）不需要DOM元素存在以供事件應用。

http://api.jquery.com/live/

來源

2010-09-17 16:53:54

這不是問題，因爲$ this在this.each（）的每次演練中都會被覆蓋。（請參閱我的回答） – elektronikLexikon 2010-09-17 16:56:21

jQuery：插入DOM元素並附加事件

回答

相關問題