jquery append() không làm việc trên các yếu tố động thêm

Question

Cân nhắc HTML

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

và mã 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 

Có điều là, tôi cần phải thêm "x" dấu ấn cho tất cả các mới thêm các yếu tố vào dom.

Trong trường hợp này, chỉ các phần tử mặc định mới được gắn thêm dấu "x".

Các thành phần mới được thêm vào không được nối thêm bởi "x".

Tôi chắc chắn công việc sẽ đơn giản nhưng không thể làm đúng !!

Sống dụ - http://jsfiddle.net/vaakash/LxJ6f/1/

Answer 1

Mã của bạn đang chạy ngay lập tức, và vì vậy tất nhiên nó chỉ có quyền truy cập vào các yếu tố đó đã tồn tại. Mã thêm các mục danh sách mới đang chạy sau này, khi người dùng nhấp vào một cái gì đó. Bạn sẽ phải móc vào quá trình đó.

Một cách là móc cùng một sự kiện và chạy mã của bạn từ trình xử lý sự kiện. Hãy nhớ gắn sự kiện sau họ thực hiện.

mã của họ:

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

Mã của bạn (sau họ):

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

markButtons(); 

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

Updated fiddle

Lý do tôi nói mã của bạn cần phải làm hookup nó sau của họ mã là jQuery đảm bảo thứ tự các cuộc gọi đến các trình xử lý sự kiện: Khi ev ent xảy ra, các trình xử lý được gọi theo thứ tự mà chúng được đính kèm. Bằng cách gắn xử lý của bạn sau khi họ đính kèm của họ, bạn đảm bảo rằng xử lý của bạn được gọi là sau khi họ đã làm điều đó.

Nếu bạn đang lo lắng về thứ tự nhận được trộn lẫn, bạn luôn có thể trì hoãn mã của bạn một chút:

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

Bằng cách đó, mã của bạn được đảm bảo để chạy sau khi tất cả các xử lý sự kiện nối với các click đã được chạy.

Answer 2

Bạn phải lặp lại "x" mã trong xử lý sự kiện:

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

Tất nhiên bạn cũng có thể chỉ cần đặt in đậm "x" ngay trong <li> khi bạn gắn nó ...

chỉnh sửa Nếu bạn không thể thay đổi trình xử lý nhấp chuột, thì điều duy nhất bạn có thể làm là cuộc thăm dò ý kiến ​​của DOM hoặc thử cách khác như @TJ Crowder đề nghị (mà tôi nghĩ rằng nên làm việc tốt).

Answer 3

Tại sao không chỉ làm điều đó trong phần thêm ban đầu?

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

---

Kể từ khi nó có vẻ như bạn không có quyền truy cập vào các kịch bản mà là làm phụ thêm, bạn có thể ràng buộc xử lý của riêng bạn.

$('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); 
}); 

này sẽ chọn li yếu tố mà hiện không có một b yếu tố lồng nhau, và nó sẽ nối một.

Tôi đã đặt nó trong một số setTimeout vì bạn có thể không đảm bảo được thứ tự thực hiện các trình xử lý.

Nếu bạn thích bộ chọn CSS hợp lệ, làm điều này thay vì:

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

hay này:

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

---

JSFIDDLE DEMO cho thấy hai bộ xử lý riêng biệt.