javascript - 使用 JQuery .find() 访问 Bootstrap Modal 内的输入文本字段

Question

我正在尝试访问输入框中输入的文本，但它始终返回空字符串

有人可以帮忙解决这个问题吗？

$('#my_modal').on('show.bs.modal', function(e) {
 
  var id = $(e.relatedTarget).data('id');
  var txt = $(this).find('input[id="txt"]').val();

  $(this).find('button[id="save"]').click(function() {
    alert(id);
    alert(txt);
   });
  
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<a href="#my_modal" data-toggle="modal" data-id="1">Edit</a>

<div class="modal" id="my_modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Click Save!</h4>
      </div>

      <div class="modal-body">
        <div class="form-group">
          <label for="txt" class="control-label">Text:</label>
          <input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/>
        </div>
     </div>

     <div class="modal-footer">
       <button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
       <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
     </div>
   </div>
 </div>
</div>

Answer 1

您正在尝试访问模态显示上的输入值，而实际上该值是空的。您应该访问按钮的点击处理函数内的值。

请注意: this 根据它们执行的上下文而有所不同，因此模式点击和按钮 click 有自己的 this。为了保留预期的 this (模态)，您可以将其存储在变量中，然后使用它。

$('#my_modal').on('show.bs.modal', function(e) { 
  var id = $(e.relatedTarget).data('id');
  var that = $(this);
  $(this).find('button[id="save"]').click(function() {
    var txt = that.find('input[id="txt"]').val();
    alert(id);
    alert(txt);
   });
  
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<a href="#my_modal" data-toggle="modal" data-id="1">Edit</a>

<div class="modal" id="my_modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Click Save!</h4>
      </div>

      <div class="modal-body">
        <div class="form-group">
          <label for="txt" class="control-label">Text:</label>
          <input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/>
        </div>
     </div>

     <div class="modal-footer">
       <button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
       <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
     </div>
   </div>
 </div>
</div>