如何在输入文本框中获取值复选框模式弹出 ajax

Question

我的问题非常类似于通过 jQuery 在文本输入中显示多个复选框值（来自模式窗口）

当我 select 选项复选框（弹出）时，它在输入<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：select.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事件侦听器在您的异步 html 从服务器返回之前运行。 这意味着代码将执行调用以获取数据，但它将在您的异步数据从服务器返回之前继续执行下面的代码。

现在，当您获取数据时，浏览器正在查找当前页面上的所有input[name=name_id] ，并为其分配一个事件侦听器。 但是，在您的浏览器完成此操作之前，您的数据还没有返回，这意味着您的新数据将没有此事件侦听器。

要解决此问题，您必须在通过$('#disp_data').html(fakeData); .change .