DOM内に要素が表示された後で関数を実行する

Question

要素をDOMに読み込んだ後、その要素からクラスを削除するにはどうすればよいですか？状況に続き

：クラス名selectedを持つ要素がDOMに表示された場合

は、私はそれからクラスhighlightを削除したいです。

例：適切なあなたがDOM ready eventを待ち受けることになる場合にはページ、または他のいくつかのイベントを持つ要素をロードするかどうかに応じて、以下のコードを解雇しなければならない

<div class="selected highlight"> 
<div class="group">Material</div> 
<div class="option">350g Chromo-Sulfatkarton matt</div> 
</div> 

Answer 1

以下のようにjQueryのイベントを挿入DOMNodeInsertedを使用することができると思います。私の意見では、CSSはここでより関連性があります。

私はCSS keyframesとanimationを使用してこのスニペットを作成しました。

function create() { 
 
    var element = $("<p class='selected highlight'>" + Math.random() + "</p>"); 
 
    $("#container").prepend(element); 
 
}

.selected { 
 
    -webkit-animation: highlight 1s infinite; 
 
    -moz-animation: highlight 1s; 
 
    -o-animation: highlight 1s; 
 
    animation: highlight 1s; 
 
} 
 

 
/* Chrome, Safari, Opera */ 
 
@-webkit-keyframes highlight { 
 
    from { 
 
    background-color: red; 
 
    } 
 
    to { 
 
    background-color: none; 
 
    } 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes highlight { 
 
    from { 
 
    background-color: red; 
 
    } 
 
    to { 
 
    background-color: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button onclick='create()'>Create an element</button> 
 
<div id="container"></div>

Answer 2

イベントが発生します。

$('.selected.highlight').removeClass('highlight'); 

DOM readyイベントをリッスンしている場合コードは次のようになります。

$(function() { 
    $('.selected.highlight').removeClass('highlight'); 
}); 

Answer 3

$("div.selected").ready(function() { 
$("div.selected").removeClass("highlight") 
}); 

Answer 4

私はあなたがすべての答えはjQueryのを使用しています

$('body').on('DOMNodeInserted', function(e) { 
    if ($(e.target).hasClass('selected')) { 
    $(e.target).removeClass('highlight') 
    } 
});