無法理解的jQuery綁定的行爲及與點擊賽事直播

Question

fiddle of the issue

$('div').not('#logs').each(function() { 
    var id = $(this).attr('id'); 
    $("#" + id).bind('click', function() { 
     $('#logs').append('\n' + $(this).attr('id') + '\n'); 
    }); 
}); 

$(".test").live('click', function() { 
    alert('from x'); 
}); 

什麼，我會做的一樣，創建一些div和將通過所有的div使用每個功能都循環和將有綁定每個div的點擊事件。

在類名'test'的每個div內都有跨度，我將按照上面的指定綁定實時功能。當單擊跨度時，只會顯示「從x開始」的警報，但我無法理解行爲。

行爲就像，綁定功能也在工作，實時功能也在工作。

請道歉我的句子形成錯誤，我在解釋問題時有點低。 等待行爲的解釋。

謝謝

Answer 1

事件冒泡DOM樹，觸發任何處理程序綁定元素。

您通常會通過調用event.stopPropagation()但是停止傳播，因爲.live()方法處理事件一旦他們傳播到文檔的頂部，你的父元素click()方法將已經被調用。

你可以讓你的代碼工作，改成如下預期：

$(".test").on('click', function (event) { 
    alert('from x'); 
    event.stopPropagation(); 
}); 

如果你真的需要使用.live()例如，如果你正在使用.bind()您的父元素動態創建這些，然後代替，還可以使用.live()，例如：

$('div').not('#logs').each(function() { 
    var id = $(this).attr('id'); 
    $("#" + id).live('click', function() { 
     $('#logs').append('\n' + $(this).attr('id') + '\n'); 
    }); 
}); 

$(".test").live('click', function (event) { 
    alert('from x'); 
    event.stopPropagation(); 
}); 

您也可以使用更受青睞的'。on（）'方法而不是折舊的.live()，如下所示：

$('div').not('#logs').each(function() { 
    var id = $(this).attr('id'); 
    $(document).on('click', "#" + id, function() { 
     $('#logs').append('\n' + $(this).attr('id') + '\n'); 
    }); 
}); 

$(document).on('click', ".test", function (event) { 
    alert('from x'); 
    event.stopPropagation(); 
}); 

Answer 2

事件綁定到事件附加時在頁面上存在的元素。

在你的情況下，發生這種情況時元素總是出現在頁面上。所以這兩種綁定事件的方式都會起作用。

第二種情況是事件代理，用於將事件綁定到動態創建的事件，即綁定事件後附加到DOM的元素。因此，當您使用live綁定事件時，事件將附加到始終存在的文檔。一個Ajax請求後，它使用事件冒泡插入到DOM

也許元素的概念

代碼

你不爲選擇器選擇通過它相匹配的所有元素所需要的$.each環

$('div').not('#logs').click(function() { 
     $('#logs').append('\n' + this.id + '\n'); 
}); 

// live has be deprecated to delegate events as of jQuery 1.7 
// use on instead to bind the events for event delegation 
$(document).on('click', ".test", function() { 
    alert('from x'); 
}); 

Check Fiddle