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 

に考えてみて、私はすべて新しくに "×" 印を追加する必要がありますdomに要素を追加しました。

この場合、デフォルトの要素にのみ「x」マークが付いています。

新たに追加された要素には「x」は付いていません。

私は仕事が簡単だと確信していますが、それを正しく得ることはできません！

ライブの例 - http://jsfiddle.net/vaakash/LxJ6f/1/

Answer 1

はあなたのコードがすぐに実行されている、ので、もちろんそれだけで既に存在している要素へのアクセスを持っています。ユーザーが何かをクリックすると、新しいリスト項目を追加するコードが後で実行されます。あなたはそのプロセスにも取り組まなければなりません。

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」のコードを繰り返す必要があります：...あなたはそれを追加するときにもちょうど<li>に太字の「x」の権利を置くことができる。もちろん、

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

を

editクリックハンドラを変更できない場合は、DOMをポーリングするか、何か@TJのようなものを試してくださいCrowderが提案する（私はうまくいくはずだと思う）。

Answer 3

なぜ最初の追加でそれをしないのですか？

$('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要素を持っていない、それが1を追加しますli要素を選択します。

ハンドラの実行順序を保証できない場合がありますので、setTimeoutに入れました。

有効なCSSセレクタを希望する場合、代わりにこの操作を行います。

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

またはこの2つの別々のハンドラを示す

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

---

JSFIDDLE DEMOを。