使用DOM動態更新的點擊事件

我正在玩幾個示例來學習jQuery。我做了一個例子項目時，用戶點擊一個add按鈕和顯示的項目列表，當它們在列表中的任何項目單擊添加到列表：使用DOM動態更新的點擊事件

代碼：

HTML

<div id="sample"></div> 
    <a id="add" href="#">Add</a> 
    <ul id="list"> 
     <li>old item</li> 
     <li>old item</li> 
     <li>old item</li> 
    </ul> 
</div>

的jQuery

var $itemsList = jQuery('#list li'); 

jQuery('#add').click(function(e){ 
    e.preventDefault(); 
    jQuery('#list').append('<li>new item</li>'); 
    $itemsList = jQuery('#list li'); 
}); 

$itemsList.click(function(e){ 
    e.preventDefault(); 
    console.log('there are ' + $itemsList.length + ' items'); 
    $itemsList.each(function(){ 
     console.log(jQuery(this).text()); 
    }); 
});

問題：

如果使用r單擊舊項目時，控制檯顯示所有項目（新舊），但如果用戶點擊新項目（通過單擊add按鈕創建），則不會顯示它們。我假定事件點擊符合$itemsList，並且此對象僅引用腳本加載時創建的項目，但不包含連續創建的項目。

任何建議，sugestions？

來源

2011-12-01 Marcos

點擊線只執行一次，並將處理程序應用於$ itemsList指向的元素 – Viruzzo

當您這樣做時$itemsList.click(...)您將事件處理程序綁定到'click'事件，但即使您在'Add'事件處理程序中重新選擇列表項目，也不會自動綁定新項目。

您必須使用事件委託來爲您單擊事件以綁定到動態添加的元素。

$('#list').on('click', 'li', clickHandler);

這樣做可以被翻譯成：委託在元件#list的「點擊」事件，並且抑制事件處理li元件只（第二個參數）。

在.query 1.7中添加了.on（）方法。如果您使用庫的以前版本，請使用.delegate（）。

注意：忘記.live（）這是棄用。在.on()

文檔和.delegate()

來源

2011-12-01 09:39:14

在這種情況下，最好使用live（）而不是委託。如果on（）不存在。 – Oyeme

.live（）已被棄用，這意味着它可以在庫的任何其他更新中被刪除，您不應該再使用它。 –

謝謝，你把我推向了正確的方向。使用委託（）可以正常工作。謝謝。 – Marcos

因爲要附加新項目的DOM，你需要使用不同的方法將它們分配處理程序，click()僅用於提供給jQuery的負載DOM元素。

相反，使用delegate()添加處理程序：

var $itemsList = jQuery('#list li'); 

jQuery('#add').click(function(e){ 
    e.preventDefault(); 
    jQuery('#list').append('<li>new item</li>'); 
    $itemsList = jQuery('#list li'); 
}); 

$("#list").delegate("LI", "click", function(e){ 
    e.preventDefault(); 
    $("#total").text('there are ' + $itemsList.length + ' items'); 
    $itemsList.each(function(){ 
     console.log(jQuery(this).text()); 
    }); 
});

Example fiddle here

或者，如果你正在使用jQuery 1.7+可以使用on()，而不是delegate()，但它們的功能基本上在同一這種情況。

來源

2011-12-01 09:39:46

感謝您的回答。使用委託（）可以正常工作。 – Marcos

var $itemsList = jQuery('#list'); 

jQuery('#add').click(function(e){ 
    e.preventDefault(); 
    jQuery('#list').append('<li>new item</li>'); 
    $itemsList = jQuery('#list li'); 
}); 

$itemsList.on("click","li",function(e){ 
    e.preventDefault(); 
    console.log('there are ' + $itemsList.length + ' items'); 
    $itemsList.each(function(){ 
     console.log(jQuery(this).text()); 
    }); 
});

jQuery 1.7。1

ON（） - >住（）或委託（）

描述：附加的事件處理程序的當前選擇器現在和將來匹配其中，所有的元素。

來源

2011-12-01 09:41:03 Oyeme

謝謝，使用委託（）工作正常。 – Marcos

使用DOM動態更新的點擊事件

回答

相關問題