Как получить значение флажка модального всплывающего окна ajax в поле ввода текста

Question

У меня есть вопрос, очень похожий на отображение нескольких значений флажков (из модального окна) при вводе текста через jQuery

Когда я выбираю опцию флажка (всплывающее окно), он не не работает на входе <input class="select-list" type="text" name="choose">.

Это мой html:

<input class="select-list" type="text" name="choose">
<button id="myBtn" class="btn-popup" >Choose...</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Choose ...</h2>
    </div>
    <div class="modal-body">
            <div class="container">  
                <div id="disp_data"></div>     
                <div class="loading">loading...</div>           
            </div> 
    </div>
  </div>
</div>

Это мой скрипт :

<script>
/// modal
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
// fetch list db
$(document).ready(function(){  
    function fetch_data()  
    {  
        $('.loading').show();
        $('#disp_data').show();

         $.ajax({  
              url:"select.php",  
              method:"POST",  
              success:function(data){  
                   $('#disp_data').html(data);  
                   $('.loading').hide();
              }  
         });  
    }  
    fetch_data();  
});  
/// checkbox on textbox
$('input[name=name_id]').change(function() {
    $('.select-list').val(
        $('[name=name_id]:checked').map(function() {
            return $(this).val();
        }).get().join(',')
   );
});
</script>

Это мой php: выберите. php (AJAX)

<?php  
$conn = mysqli_connect("localhost", "root", "root", "datab");  
$output = '';  
$sql = "SELECT * FROM tablemo ORDER BY id ASC";  
$result = mysqli_query($conn, $sql);  
echo '<ul>';
     while($row = mysqli_fetch_array($result)) {
          echo '<li>';
          echo '<input type="checkbox" id="'.$row['id'].'" name="name_id" value="'.$row['id'].'">';
          echo '<label for="'.$row['id'].'">'.$row['name'].'</label>';
          echo '</li>';
     }
echo '</ul>';
?>  

http://jsfiddle.net/uZcaT/

https://jsfiddle.net/behrouzbash/q5wt9un1/

Answer 1

Ваша проблема в том, что прослушиватель событий .change работает до того, как ваш асин c html возвращается с сервера. Это означает, что код выполнит вызов для получения данных, но продолжит выполнение кода ниже до того, как ваши асин c данные вернутся с сервера.

Теперь, пока вы выбираете По данным, браузер ищет все input[name=name_id] на текущей странице и назначает для нее прослушиватель событий. Однако ваши данные не возвращались до того, как ваш браузер уже сделал это, то есть ваши новые данные не будут иметь этого прослушивателя событий.

Чтобы решить эту проблему , вам необходимо добавить прослушиватель событий (.change) после программного добавления данных через $('#disp_data').html(fakeData);.