動的に追加された子要素に作用しないクリックイベント

Question

私はthis pageを持っています。ページの右側に記載されているさまざまなマーカーを使用して、ページ上のさまざまなテキスト領域を強調表示できます。

エリアにマークするたびに、spanがマーカーのクラスとともに追加されます。右から黄色のマーカーを使用するとします。強調表示された領域は、次のスパンタグを使用してカバーされます。 <span class="mark1">[ highlighted text ]</span>。

私がしたいことは、ユーザーがこのスパンタグをクリックするたびに、単に境界線を変更したいときだけです。しかし、どういうわけか私はこれを達成することができません。

ここに私がしていることがあります。

$("#sachverhalt").find("span").on("click","span[class='mark1'],span[class='mark2'],span[class='mark3'],span[class='mark4'],span[class='mark5']",function(){ 
    $(this).css('border',"1px solid #000000"); 
}); 

EDIT：

とタグの構造は次のようになります。

<div id="sachverhalt"> 
<article> 
    <p> 
    <span> 
     [some random text] 
     <span class="mark1"> 
     [highlighted text] 
     </span> 
     [some random text] 
    </span> 
    </p> 
</article> 
</div> 

<span class='mark1'><span>タグは、ユーザーが強調表示したときに動的に追加されます。

誰もこのイベントが呼び出されていない理由を教えていただけますか？

Answer 1

$（document）.on（event、selector、function）を使用する必要があります。 それ以外の場合、イベントハンドラは新しい要素にバインドされません。また、で動作するはず

：（検索（「スパン」）を除く）

$("#sachverhalt").on("click","span[class='mark1'],span[class='mark2'],span[class='mark3'],span[class='mark4'],span[class='mark5']",function(){ 
    $(this).css('border',"1px solid #000000"); 
}); 

http://api.jquery.com/on/

Answer 2

ページがロードされた後の要素がDOMに追加されると、あなたもをバインドする必要がありますDOMがロードされたときに存在していた要素に渡します。あなたが仕事をクリックするように、体の聴衆にバインドします。

$("body #sachverhalt").find("span").on("click","span[class='mark1'],span[class='mark2'],span[class='mark3'],span[class='mark4'],span[class='mark5']",function(){ 
    $(this).css('border',"1px solid #000000"); 
});