Цикл по глобальному массиву и добавление прослушивателя событий в документ - PullRequest
Новая
       25

Цикл по глобальному массиву и добавление прослушивателя событий в документ

0 голосов
/ 08 июня 2018

Я уверен, что это проблема закрытия области или итератора, но я просто не могу заставить ее работать.Заранее извиняюсь, если это невероятно очевидное исправление.

Это пользовательский тег HTML в GTM.Идея состоит в том, чтобы прослушать события отправки формы WPCF7 (контактная форма WordPress 7) и передать соответствующее событие в GTL dataLayer. 

//Event listener array
var listeningEvents = [
    ["wpcf7mailsent","CF7formSubmitAndSent"],   //Mail sent successfully
    ["wpcf7submit","CF7formSubmit"],            //Form submitted
    ["wpcf7spam","CF7formSpam"],                //Form spam
    ["wpcf7invalid","CF7formInvalid"],          //Form invalid
    ["wpcf7mailfailed","CF7formMailFail"]       //Form fail
];

//Loop through event listener array & action
for( var i = 0; i < listeningEvents.length; i++){
    document.addEventListener( listeningEvents[i][0],
        (function(i, event, listeningEvents) {
            dataLayer.push({
                'event' : listeningEvents[i][1]
            });
        })() 
    );
}

Я отлаживал с console.log непосредственно перед dataLayer.push,listenEvents [i] [1] внутри addEventListener выглядит как неопределенное.

Я попытался выполнить несколько советов здесь: https://www.pluralsight.com/guides/javascript-callbacks-variable-scope-problem

Но я продолжаю получать неопределенную ошибку.

Я действительно не хочу добавлять прослушиватель событий отдельно 5 раз.Я действительно хочу иметь возможность расширить список прослушивателей событий для дальнейшего сопровождения.

[EDIT]

Я думаю, что нашел рабочее решение здесь: https://arstechnica.com/civis/viewtopic.php?f=20&t=138763

var stuff = ['a', 'b', 'c'];

for(var i=0; i<stuff.length; i++)

{

  var closureMaker = function(line) {

    return function(event){ alert(line); };

  };

  var closure = closureMaker( stuff[i] );

  addEventListener('click', closure, false);

}

$ я больше не был моей проблемой - он обращался к моему глобальному массиву из addEventListener.

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

Я думаю, что нашел рабочее решение здесь: https://arstechnica.com/civis/viewtopic.php?f=20&t=138763

var stuff = ['a', 'b', 'c'];

for(var i=0; i<stuff.length; i++)

{

  var closureMaker = function(line) {

    return function(event){ alert(line); };

  };

  var closure = closureMaker( stuff[i] );

  addEventListener('click', closure, false);

}

$ Я больше не был моей проблемой - он обращался к моему глобальному массиву изнутри addEventListener.

0 голосов
/ 08 июня 2018

Единственная проблема, которую я вижу с вашим кодом, состоит в том, что «i» является параметром в функции.

Не обращайтесь к «i» непосредственно внутри, вместо этого передавайте его как параметры функции, как показано ниже.

Если вы обращаетесь к «i» напрямую, вы получите последнее значение «i» из-за проблем с закрытием. 

for( var i = 0; i < listeningEvents.length; i++){
    document.addEventListener( listeningEvents[i][0],
      (function(i, event, listeningEvents) {
        dataLayer.push({
            'event' : listeningEvents[i][1]
        });
      })(i) 
    );
}
...