的jQuery的append（）不工作的動態添加元素

Question

考慮HTML

<ul> 
    <li>Default item</li> 
    <li>Default item</li> 
</ul> 
<button>Append</button> 

和jQuery代碼

$('button').live('click', function(){ //This action is done by an external script. 
    $('ul').append('<li>Added item</li>'); 
}); 

$('ul li').append('<b> x</b>'); // This action is done by me 

的事情是，我需要的 「X」 標記附加到所有新向dom添加元素。

在這種情況下，只有默認元素被附加以「×」標記。

新添加的元素沒有「×」追加。

我相信工作會很簡單，但不能得到它的權利！

活生生的例子 - http://jsfiddle.net/vaakash/LxJ6f/1/

Answer 1

你的代碼運行向右走，所以當然它只能訪問已經存在的元素。添加新列表項的代碼稍後運行，當用戶單擊某件事物時。你也必須參與這個過程。

一種方式是掛鉤它們是相同的事件，從事件處理程序運行代碼。請務必在之後掛鉤事件。

其代碼：

$('button').live('click', function(){ 
    $('ul').append('<li>Added item</li>'); 
}); 

你的代碼（後他們）：

$('button').live('click', markButtons); 

markButtons(); 

function markButtons() { 
    $('ul li:not(.marked)') 
     .addClass("marked") 
     .append('<b> x</b>'); 
} 

Updated fiddle

我之所以說你的代碼需要後做了轉播其代碼是jQuery保證對事件處理程序調用的順序：當ev如果發生，處理程序將按照它們所連接的順序進行調用。通過在你的處理程序附加後附加你的處理程序，你保證你的處理程序在它們完成它的事情之後被調用。

如果你擔心順序混錯，你總是可以耽誤你的代碼稍微：

$('button').live('click', function() { 
    setTimeout(markButtons, 0); 
}); 

這樣一來，你的代碼是保證畢竟掛在click事件處理程序的運行已經運行。

Answer 2

您必須重複在事件處理程序的「X」碼：

$('button').live('click', function(){ //This action is done by an external script. 
    $('ul').append(
     $('<li>Added item</li>').append('<b>x</b>') 
    ); 
}); 

當然，你也可以只把加粗的「X」就在<li>當你追加吧...

編輯如果您不能更改點擊處理程序，那麼您唯一可以做的就是輪詢DOM，或者嘗試類似於@TJ克羅德建議（我認爲應該工作得很好）。

Answer 3

爲什麼不直接在最初的append中做？

$('button').live('click', function(){ //This action is done by an external script. 
    $('ul').append('<li>Added item<b> x</b></li>'); 
}); 

---

因爲它聽起來像你沒有訪問腳本是做追加，你可以綁定自己的處理程序。

$('button').live('click', function(){ //This action is done by an external script. 
    setTimeout(function() { 
     $('ul li:not(li:has(b))').append('<b> x</b>'); 
    }, 10); 
}); 

這將選擇目前沒有嵌套b元素li元素，它會追加一個。

我把它放在一個setTimeout因爲你可能不能夠保證處理器的執行順序。

如果你喜歡有效的CSS選擇器，而是執行此操作：

$('ul li').not($('li b').closest('li')).append('<b> x</b>'); 

或本：

$('ul li').not(function() { return $(this).find('b').length; }).append('<b> x</b>'); 

---

JSFIDDLE DEMO顯示了兩個獨立的處理器。