Закрытие JavaScript для обработчика событий jQuery

Question

У меня есть список объектов, каждый из которых имеет .bullet, который является SPAN. Я хочу привязать клик по пролету к обработчику, чем выполнить определенное действие на span с помощью jQuery. Я вижу какое-то поведение, которое я не понимаю, поэтому я надеюсь, что кто-то сможет объяснить, что происходит. В основном, это первый пример кода работы:

for (var i = 0 ; i< length ; i++) { 

      (function(){ 
       dataNode = dataNodeList[i]; 

       var handler = function(e) { 

        e.data.node.bullet.firstChild.nodeValue = "- "; 


       }; 


       $(dataNode.bullet).on("click",{node:dataNode},handler); 


      })(); 

     } 

Однако этот второй вариант не работает:

for (var i = 0 ; i< length ; i++) { 

      (function(){ 
       dataNode = dataNodeList[i]; 

       var handler = function() { 

        dataNode.bullet.firstChild.nodeValue = "- "; 


       }; 


       $(dataNode.bullet).on("click",handler); 


      })(); 

     } 

В этом втором примере,

dataNode.bullet.firstChild.nodeValue = "- "; 

не оказывает никакого влияния на величину SPAN, который я планировал. Я ожидал, что dataNode.bullet все равно укажет на SPAN, который я хочу изменить из-за закрытия JavaScript. Итак, может кто-нибудь объяснить, почему это не удается? Благодарю.

Answer 1

Попробуйте это:

for (var i = 0 ; i< length ; i++) { 
    (function(index){ 
     var dataNode = dataNodeList[index]; 

     var handler = function() { 
      dataNode.bullet.firstChild.nodeValue = "- "; 
     }; 

     $(dataNode.bullet).on("click",handler); 
    })(i); 
} 

Замыкание определяет новую область. Это необходимо, потому что ваш обработчик не вызывается до тех пор, пока цикл не завершится, поэтому i не является частью области действия в момент ее вызова или (в некоторых случаях) имеет последнее возможное значение из цикла.