如何在其他函數中調用自調用javascript函數？

我不得不召回自我調用的方法，將事件偵聽器添加到新添加的元素列表如何在其他函數中調用自調用javascript函數？

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>

來源

2017-09-25 vinay

你得到的錯誤是什麼？在問題中添加所有細節是很好的。 – epascarello

reloader不是自調用函數。這是自調函數的結果。如果在自調用函數內部，您輸入return 2，則重新加載器將爲2.

您不希望它是自調用函數。只需將重新加載程序本身作爲該功能，然後在分配後再撥打reloader()即可。

來源

2017-09-25 13:13:11 TKoL

我們是否可以回想一下自調函數，它不會返回任何東西，而是在另一個函數中被調用？ – vinay

不，沒有理由儘管避免只將函數分配給變量並像正常一樣調用它。不要擔心它是自我調動的，這不會對你有任何特別的好處。 – TKoL

所以只是把它定義爲一個函數，比調用它。你擁有的問題是可變的重新加載器保存了函數返回的東西。由於該函數不返回任何內容，因此它是未定義的。

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>

另一種選擇是使用事件委派，甚至不需要重新綁定事件。

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>

來源

2017-09-25 13:12:24 epascarello

的IIFE執行和結果reloader分配，因此，你不能叫reloader()

從我的理解看你的代碼，你可能需要分配函數本身到reloader，執行它，然後根據需要再次調用它。

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 
}

來源

2017-09-25 13:12:58 Nope

如何在其他函數中調用自調用javascript函數？

回答

相關問題