Execute function when the element appears in the gift

Navigation
2

How to execute a function when a given element exists in DOM ?

For example, I have a list with 4 elements, and whenever a new element comes up I want it to execute a certain function . Sample code below: 

// Função a ser executada
function fazAlgoNaLI() {
  $(this).addClass('alterada');
}

// Execução quando os elementos já existem no dom
$('li').each(fazAlgoNaLI);

// Agora vamos adicionando elementos após e preciso executar a funcion quando esse elemento for adicionado
setInterval(function() {
  $('ul').append('<li>Nova linha</li>');
}, 1000);
.alterada {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><li>Linha1</li><li>Linha2</li><li>Linha3</li></ul>
  

OBS1:OnepremiseisthatIcannotcontrolthemomentwhenthis  elementischangedsincethereareseveralthird-partyJavaScriptsthatare  allminified.SoIneedaneventthatrunsthefunctionwhentheDOMchanges.

  

asked by anonymous 13.09.2017 / 03:52

1 answer

2

I suggest you use one of these 3 ways to check:

Setting a property on the

First of all I recommend you read this:

So if the structure is really simple the way it did, and the elements are always LIs then a setTimeout that would check the ones that already have the property or not: 

// Função a ser executada
function fazAlgoNaLI() {
    if (this.alterado) return; //Ignora se já tiver a propriedade

    this.alterado = true;
    
    $(this).addClass('alterada');
}

// Agora vamos adicionando elementos após e preciso executar a funcion quando esse elemento for adicionado
setInterval(function() {
  $('.foo').append('<li>Nova linha</li>');
}, 1000);

/* verifica alterações*/
var quantidade = 0;
(function mutacao() {
    var lis = $('.foo > li');

    //verifica se a quantidade aumentou
    if (quantidade !== lis.length) {
        lis.each(fazAlgoNaLI);
        quantidade = lis.length; //Atualiza a ultima quantidade
    }
    
    setTimeout(mutacao, 100);
})();
.alterada {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulclass="foo">
  <li>Linha 1</li>
  <li>Linha 2</li>
  <li>Linha 3</li>
</ul>

Using the :not(...)

Or you can just pick the ones that do not have the class="alterada" class, so use the :not(...) selector, do so: 

// Função a ser executada
function fazAlgoNaLI() {
    $(this).addClass('alterada');
}

// Agora vamos adicionando elementos após e preciso executar a funcion quando esse elemento for adicionado
setInterval(function() {
  $('.foo').append('<li>Nova linha</li>');
}, 1000);

(function mutacao() {
    var lis = $('.foo > li:not(.alterada)'); //Pega somente elementos que não tiverem a classe alterada

    lis.each(fazAlgoNaLI);
    
    setTimeout(mutacao, 100);
})();
.alterada {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulclass="foo">
  <li>Linha 1</li>
  <li>Linha 2</li>
  <li>Linha 3</li>
</ul>

Using MutationObserver

You can use MutationObserver checking with combined addedNodes , only new elements added, and then you can combine with .filter , from jQuery to check if it's a valid tag, or check if was an added LI: 

// Função a ser executada
function fazAlgoNaLI() {
    $(this).addClass('alterada');
}

// Agora vamos adicionando elementos após e preciso executar a funcion quando esse elemento for adicionado
setInterval(function() {
    $('.foo').append('<li>Nova linha</li>');
}, 1000);

/* verifica alterações*/
var isReady = 0;

var observer = new MutationObserver(function( mutations ) {
  mutations.forEach(function( mutation ) {
    var nn = mutation.addedNodes;

    if (nn !== null) {

        console.log("Foi adicionado " + nn.length + " novo elemento");

        $(nn).filter('li').each(fazAlgoNaLI);
    }
  });    
});

var config = { 
    childList: true
};

//Inicia o observador
observer.observe($(".foo").get(0), config);
.alterada {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulclass="foo">
  <li>Linha 1</li>
  <li>Linha 2</li>
  <li>Linha 3</li>
</ul>
    
13.09.2017 / 04:41
program does not take the system date How to calculate the use of a football team in a championship?