Question

我正在尝试将数据从引导模式传递到ul元素。它允许我添加多个li元素，但它始终是第一个li元素，并且不会更改。请帮忙。

<ul id="myList">
</ul>

<button type="button" id="btnLaunch" class="btn btn-primary">Add Item</button>
<div class="modal fade" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
              </button>
              <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
              <p>Enter text:</p>
              <input type="text" id="txtInput">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" id="btnSave" class="btn btn-primary">Save changes</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->
<script>
$(function() {
  $('#btnLaunch').click(function() {
    $('#myModal').modal('show');
  });

  $('#btnSave').click(function() {

    var value = $('input').val();
     $("#myList").append('<li><input type="checkbox" id="'+ value +'" name="'+ value +'" value="'+ value +'" checked>'+ value +'</li>');

        $('#myModal').modal('hide');


  });
});
</script>

Answer 1

使用此：

 $('#txtInput').val();

代替

 $('input').val();

您在每次迭代中仅使用输入选择器，这太通用了。您可以使用Jquery中的Id选择器来获取输入元素并从中获取新值。这是一个有效的示例。

 <script>
  $(function() {

   $('#btnLaunch').click(function() {
      $('#myModal').modal('show');
   });

   $('#btnSave').click(function() {

   var value = $('#txtInput').val();
   $("#myList").append('<li><input type="checkbox" id="'+ value +'" 
   name="'+ value +'" value="'+ value +'" checked>'+ value +'</li>');

   $('#txtInput').val('');

   $('#myModal').modal('hide');
  });
 });
 </script>

Bootstrap模态数据刷新

1 个答案: