Click事件不會在jQuery插件正常工作

我正在寫一個jQuery插件，但我有一個問題：Click事件不會在jQuery插件正常工作

我的HTML元素

<a id="trac"></a>

我的JS調用插件

$('#trac').myplugin();

我的插件

$.fn.myplugin = function(){ 
    var $root; 
    return this.each(function(){ 
     $root = $(this); 
     $root.live('click',function(){ 
      console.log('here'); 
     }); 
    }); 
}

發生「從這裏」永遠不會顯示。但如果我使用...

$('#trac').live('click',function(){ 
    console.log('here'); 
});

... 「這裏」顯示。我不明白爲什麼會這樣，因爲$ root和$（'＃trac'）是完全相同的jQuery對象。

我該如何解決？

謝謝！

來源

2011-06-20 Luiz Fernando

之前你的插件加載它被調用，你使用'document.ready（）'arround'$（'#trac'）。myplugin（）;'？ – powtac

你想要插件做什麼？你爲什麼使用「.live（）」？ – Pointy

是的，它被加載到一個document.ready（）中 –

「.live（）」函數需要一個選擇器，並且在你的插件中你沒有給它一個。您構建的jQuery對象（$(this)）是一個有效的對象，但不包含選擇器字符串。

你可以直接綁定的處理程序：

$root.click(function() { ... });

要說明一下：你說的，「......因爲$根$（ '＃TRAC'）是完全一樣的。」問題是，這不是真的。當你用一個選擇器字符串構建一個jQuery對象時，該對象會保持該選擇器字符串。從「$（this）」構建「$ root」時沒有字符串。「.live（）」函數通過在<body>元素上創建一個處理程序，然後測試每個遇到該選擇器的事件的目標進行操作。

來源

2011-06-20 12:48:41 Pointy

很好的答案！非常感謝！ –

我也喜歡這個答案。 –

我喜歡對方的回答是「直接」的答案，但問題表現出一定的替代，以你爲別人做什麼，我覺得你可以simplfy插件爲：如本

<div id="mystuff">hi</div> 
<div id='answer'>empty</div> 

$.fn.myplugin = function() { 
    this.live('click', function() { 
     $('#answer').text('here'); 
    }); 
} 
$('#mystuff').myplugin();

例如：http://jsfiddle.net/FgUEB/，因此「this」獲取選擇器，然後您可以附加「實時點擊」 - 沒有.each的複雜性 - 如果按照您的方式進行操作（當然選擇器固定）如果它有幾個，它會多次將這個事件放在元素上 - 這是你的例子中所包含的。

jQuery.fn.newMethod = function(){ 
    return this.each(function(){ 
     alert(typeof this); 
    }); 
};

在內部函數內（在警報中）引用this關鍵字是指當前的HTML元素。因爲它不是一個jQuery對象將無法獲得jQuery的方法（雖然，你可以在jQuery對象包裝它讓這些方法早在jQuery的（這一點）。

jQuery.fn.newMethod = function(){ 
    return this.each(function(){ 
     jQuery(this).css({'background-color':'red'});//each inner element 
    }); 
};

來源

2011-06-20 13:26:54

Click事件不會在jQuery插件正常工作

回答

相關問題