Блог

Я перебираю объект JSON для динамического заполнения <ul> списка.
У каждого <li> элемента есть <input> элемент с привязанным к нему событием щелчка.

Здесь следует мой код

index.html

 <div class="row">
   <div class="col s12 l6">
      <ul id ="moduleList" class> </ul>
   </div>
</div>
 

js

  var data = {
    "modules": [
        {
            "name": "mod1",
            "description": "mod1 description",
        },
        {
            "name": "mod2",
            "description": "mod2 description",
        },
        {
            "name": "mod3",
            "description": "mod3 description",
        }
    ]
}
document.addEventListener('DOMContentLoaded', function() {
   
   $.each(data.modules, function(i, field){
           
           let module_name = field.name;
           let module_description = field.description;
           
           //build the html <li> element
           // add name and description info
           let li_html = "<div> Name: "   module_name   "</div>";
           li_html  = "<div> Description: "   module_description   "</div>";
           
           //build the <input type="button"> element and add it to the li_html string               
           let select_button = "<div> <input class= "set_inputs" type="button" value = "select"/> </div>";
           li_html  =select_button;

           // append the <li> item code to the <ul> element 
           $("<li />").html(li_html).appendTo("#moduleList");
           
           //attach the click event to current field        
           $(".set_inputs").click(function(){
              // save field info in the web browser
              localStorage.setItem('moduleObj', JSON.stringify(field));
              
              console.log("module id= "   i   " module_name= "   module_name );
              
              window.location.href = 'select_inputs.html';
           });
        });
     }); 
 

select_inputs.html

   [..]
 <div class="row">
   <div class="col s12 l6">
      <ul id ="moduleList" class> </ul>
   </div>
</div>
 [..]
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // get the active field 
    var retrivedModuleObj = JSON.parse(localStorage.getItem('moduleObj') || '{}');
    console.log("MODULE "   retrivedModuleObj.name);
    // remove the field from the web browser
    localStorage.removeItem("moduleObj");
  });
</script>
 

Когда я загружаю index.html , я получаю ожидаемый name description текст и кнопку выбора для каждого поля JSON.

Но когда я нажимаю любую кнопку, в консоли я получаю:

 // index.html
module id= 1 module_name= mod2
module id= 2 module_name= mod3
//select_inputs.html
MODULE undefined
 

У меня есть две проблемы:

1. в index.html , почему нажатие на одну кнопку mod1, mod2 и mod3 запускают событие click?
2. в select_inputs.html , активный элемент поля не получен

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

Спасибо.

РЕДАКТИРОВАНИЕ 1: как и было предложено, я изменяю код, который извлекает поле объекта select_inputs.html . Это решает проблему № 2, но что-то все еще не так, index.html поскольку я всегда получаю

 MODULE mod3
 

несмотря на кнопку, которую я нажимаю.

Вы сериализовали значение, которое вы ввели в localStorage, в JSON. Поэтому вам нужно десериализовать его снова, когда вы попытаетесь прочитать значение:

 var retrivedModuleObj = JSON.parse(localStorage.getItem('moduleObj') || '{}');
console.log("MODULE "   retrivedModuleObj.name);
 

Кроме того, из-за завершения цикла до click того, как обработчик может быть выполнен field , переменная будет содержать только значение последней итерации. Лучшим подходом было бы использовать data атрибут для хранения field данных, связанных с каждым button элементом, и делегированный обработчик событий для управления событием щелчка по ним. Попробуйте это:

 var data = {
  "modules": [{
    "name": "mod1",
    "description": "mod1 description",
  }, {
    "name": "mod2",
    "description": "mod2 description",
  }, {
    "name": "mod3",
    "description": "mod3 description",
  }]
}

jQuery($ => {
  $.each(data.modules, function(i, field) {
    let $li = $(`<li><div>Name: ${field.name}</div><div>Description: ${field.description}</div></li>`).appendTo('#moduleList');
    $('<input class="set_inputs" type="button" value="select" />').data('field', field).wrap('<div />').parent().appendTo($li);
  });


  $('#moduleList').on('click', '.set_inputs', e => {
    let $button = $(e.currentTarget);
    console.log($button.data('field'));
    
    // Uncomment these two lines in your production version. They are only commented 
    // here as they cause issues within SO snippets
    //localStorage.setItem('moduleObj', JSON.stringify($button.data('field')));
    //window.location.href = 'select_inputs.html';
  });
}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col s12 l6">
    <ul id="moduleList"></ul>
  </div>
</div>