如何在輸入文本框中獲取值復選框模式彈出 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 .