爲什麼在jquery中點擊事件調用兩次

Question

我做了一個小插件練習。但點擊第一個跨度後，它將在控制檯中進行兩次打印。 fiddle

$.fn.sample= function(options){ 
    var setting= $.extend({ 
    d:false 
    }, options) 
    $(this).append($('<span/>').attr({id:'jitender'}).text('hi click me')) 
    $('span').click(function(){ 
    if(setting.d) 
     console.log(1) 
    else 
     console.log(2) 
    }) 
    return this 
} 
$(function(){ 
    $('div.one').sample({ 
    d:true 
    }) 

    $('div.two').sample({ 
    d:false 
    }) 
}) 

Answer 1

你加入每次調用樣本時間內的點擊事件給所有span標籤。我希望你真正想要的東西是這樣的：

var clickSpan = $('<span/>').attr({id:'jitender'}).text('hi click me'); 
$(this).append(clickSpan); 
clickSpan.click(function(){ 
    if(setting.d) 
     console.log(1); 
    else 
     console.log(2); 
}); 

http://jsfiddle.net/583vN/3/

Answer 2

$('span').click將自己附加到所有的span標籤。

變化：

$('span').click(function() 

要：

$(this).click(function() 

JSFiddle

Answer 3

你們都<span> s各自時間調用插件設置事件處理程序。您可以通過更具體的，在該插件的處理程序，改變解決這個問題：

$('span').click(function(){ 
    if(setting.d) 
     console.log(1) 
    else 
     console.log(2) 
    }) 

當這是在click上<span>執行，您設定了兩種處理程序，每個被調用。

改變上面下面的（這限制了點擊甚至跨度元素中的插件被稱爲上）：

$('span', this).click(function(){ 
    if(setting.d) 
     console.log(1); 
    else 
     console.log(2); 
    }); 

看到這個JSBin

Answer 4

因爲你掛的兩個事件處理程序到該跨度...

它發生的原因是，當您撥打$('span').click(...) - 您將通風處理程序附加到文檔中的所有跨度...

如果您只想將其附加到您正在應用的樣本插件的div範圍內，請寫：$('span', this).click(...)