使用 JSON 关联数组向多个元素添加事件侦听器

Question

I am using JavaScript to iterate through a JSON associative array to add an event listener to a collection of different forms on the same page. The key of the array is the ID of the object on the page and the value is the message to appear in a confirmation box when the form is submitted.

For example,I have a series of forms with IDs: confirm_1 , confirm_2 , confirm 2 .

On the same page I have something like this:

<script type="application/json" id="json_data">{"confirm_1": "Are you sure?", "confirm_2": "Really?", "confirm_3": "Must you?"}</script>
<script src="confirmation.js"></script>

And this is confirmation.js :

var data = JSON.parse(document.getElementById('json_data').innerHTML);

for (var key in data) {
   document.getElementById(key).addEventListener('submit', function(event) {
      if (!confirm(data[key])) {
         event.preventDefault();
      }
   });
};

The problem is that when I click the submit button on any form they are all assigned the confirmation message of the final element in the array. It's like all the previous addEventListener calls inherit the last call made.

What am I missing here?

Answer 1

You are facing issue because you have declared key as var datatype. Since it has function scope, it gets updated with the last value assigned to it which is confirm_3 in your case. This problem can be solved in different ways. I will now mention three ways to solve it.

1. If you are okay with using ES6, you could just use let instead of var to declare key variable. Since let has block scope, each loop block will have its own space for key variable.
2. By binding the value to the callback function.
3. By using Immediate Invoke function.
   

I have addressed all these in the example below and have commented them for readability.

 var data = { confirm_1: "Are you sure?", confirm_2: "Really?", confirm_3: "Must you?" }; //Using let /*for (let key in data) { document.getElementById(key).addEventListener("click", function (event) { alert(data[key]); }); }*/ //Using Bind for (var key in data) { document.getElementById(key).addEventListener( "click", function (message, event) { alert(message); }.bind(this, data[key]) ); } //Using IIF (Immediate Invoking function) /* for (var key in data) { (function(message){ document.getElementById(key).addEventListener("click", function (event) { alert(message); }); })(data[key]); } */

 <button id='confirm_1'>confirm_1</button> <button id='confirm_2'>confirm_2</button> <button id='confirm_3'>confirm_3</button>