Comment puis-je me rappeler de la fonction javascript auto-invoquée dans une autre fonction?

Question

je dû rappeler la méthode d'auto invoqué, pour ajouter écouteur d'événement aux nouveaux éléments ajoutés à la liste

var textPop = document.getElementById('textPopper'); 
 
var elements = document.getElementById('our-list'); 
 

 
var reloader = (function reload() { 
 
    document.querySelectorAll('ul li').forEach(function(click) { 
 
     click.addEventListener("click", function() { 
 
      textPop.innerHTML = this.innerHTML; 
 
     }) 
 
    }); 
 

 
} 
 
)(); 
 

 

 
function addItem() { 
 
    elements.innerHTML += "<li> Something new stuff </li>"; 
 
    reloader(); //getting error here (Uncaught TypeError: again is not a function) 
 
    }

  <h3 id="textPopper">Text popper </h3> 
 
      <ul id="our-list"> 
 
       <li>First item </li> 
 
       <li>Second item</li> 
 
       <li>Third item</li> 
 
       <li>Fourth item</li> 
 
      </ul> 
 
      <script src="my.js"></script>

Answer 1

reloader n'est pas la fonction auto-invoquant. C'est le résultat de la fonction auto-invoquant. Si, à l'intérieur de la fonction auto-invoquant, vous mettez return 2, reloader serait 2.

Vous ne voulez pas que ce soit une fonction auto-invoquée. Il suffit de recharger la fonction elle-même, puis appelez reloader() après l'affectation.

Answer 2

donc définir simplement en fonction et que l'appeler. Le problème que vous avez est le reloader varaible détient ce que la fonction retourne jamais. Puisque la fonction ne renvoie rien, elle n'est pas définie.

var textPop = document.getElementById('textPopper'); 
 
var elements = document.getElementById('our-list'); 
 

 
var reloader = function() { 
 
    document.querySelectorAll('ul li').forEach(function(click) { 
 
    click.addEventListener("click", function() { 
 
     textPop.innerHTML = this.innerHTML; 
 
    }) 
 
    }); 
 
}; 
 

 
reloader() 
 

 

 
function addItem() { 
 
    elements.innerHTML += "<li> Something new stuff </li>"; 
 
    reloader(); 
 
} 
 

 
window.setTimeout(addItem, 1000);

<h3 id="textPopper">Text popper </h3> 
 
<ul id="our-list"> 
 
    <li>First item </li> 
 
    <li>Second item</li> 
 
    <li>Third item</li> 
 
    <li>Fourth item</li> 
 
</ul> 
 
<script src="my.js"></script>

Autre option consiste à utiliser la délégation de l'événement et même pas besoin de rebind événements.

var textPop = document.getElementById('textPopper'); 
 
var ul = document.getElementById('our-list'); 
 

 
//bind click event to the parent 
 
ul.addEventListener("click", function(e) { 
 
    //e.target will give you the li that was clicked on 
 
    textPop.innerHTML = e.target.innerHTML; 
 
}) 
 

 
function addItem() { 
 
    var li = document.createElement("li") 
 
    li.innerHTML = "Something new stuff" 
 
    ul.appendChild(li); 
 
} 
 

 
window.setTimeout(addItem, 1000);

<h3 id="textPopper">Text popper </h3> 
 
<ul id="our-list"> 
 
    <li>First item </li> 
 
    <li>Second item</li> 
 
    <li>Third item</li> 
 
    <li>Fourth item</li> 
 
</ul> 
 
<script src="my.js"></script>

Answer 3

L'automate exécute Ia vie et affecte le résultat à reloader, par conséquent, vous ne pouvez pas appeler reloader()

D'après ce que je comprends regardant votre code, vous devrez peut-être affecter la fonction elle-même à reloader, exécutez-le, puis rappelez-le au besoin.

var reloader = function() { 
    document.querySelectorAll('ul li').forEach(function(click) { 
    click.addEventListener("click", function() { 
     textPop.innerHTML = this.innerHTML; 
    }) 
    }); 
}; 

reloader(); 


function addItem() { 
    elements.innerHTML += "<li> Something new stuff </li>"; 
    reloader(); //getting error here 
}