自定义插件在clone（）JQuery之后引用错误的$（this）

Question

我试着以简单的方式解释这个问题。

我有一个自定义插件，可以将click事件添加到提醒文本字段值的文本字段中。

function()
{
            $(this).click(function()
            {
                alert($(this).val());
            });

}

我将这个插件称为$(document).customPlugin()。

现在如果我这样做：

var clonedTextField =  $("#text-one").clone(true);
$("#text-one").replaceWith(clonedTextField);

点击克隆的文本字段后，我看不到它的值，而是看到我克隆的文本字段的值（母文字段）。

我需要当前文本字段（克隆文本字段）的值而不是母文本字段;

在此处查看问题： http://jsfiddle.net/Z2hdm/5/

Answer 1

原因是 plugs() 方法未附加到克隆的元素。

  

.clone( [withDataAndEvents ] )

     

一个布尔值，指示是否应复制事件处理程序   与元素。从jQuery 1.4开始，元素数据将被复制为   好。

AFIK，克隆元素不包括第三方插件。因此，您需要将其重新附加到新的克隆元素，如

$('input').replaceWith(cloned).plugs();

JSFiddle

Answer 2

我没有编写jQuery插件的经验，所以我实现了它this way希望这是正确的。

$.fn.plugs = function() {
    this.click(function() {
        alert($(this).val());
    }); 
}

使用它你不会失去使用插件的兴趣（我认为），你实际上使用了一个事件处理程序，它将使用.clone(true)克隆