다른 함수에서 javascript 함수를 호출하는 방법을 기억합니까?

Question

나는

Answer 1

reloader은 자체 호출 기능이 아닙니다. 자가 호출 기능의 결과입니다. self-invoking 함수 내에서 return 2을 입력하면 reloader는 2가됩니다.

자체 호출 함수가되고 싶지는 않습니다. 재 로더를 기능 자체로 설정 한 다음 할당 후 reloader()으로 전화하십시오.

Answer 2

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>

그래서 단지 함수로 정의 목록에 새로 추가 된 요소에 이벤트 리스너를 추가하고 전화보다, 자기 호출 방법을 기억했다. 문제는 가변 리로더가 함수가 반환하는 것을 보유한다는 것입니다. 함수는 아무것도 반환하지 않으므로 정의되지 않습니다.

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>

Answer 3

인생이 실행 및 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 
}