代码之家 › 专栏 › 技术社区 › AlanK

使用JQuery.find()访问引导模式中的输入文本字段

twitter-bootstrap-3 html jquery javascript

AlanK · 技术社区 · 5 年前

我试图访问输入框中的文本,但它始终返回空字符串

有人能帮忙解决这个问题吗?

$('#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>

2 回复 | 直到 5 年前

Mamun 5 年前

当实际值为空时,您正试图在模态显示时访问输入值。您应该访问按钮的click handler函数中的值。

请注意: this 根据执行它们的上下文不同,因此 modal 点击并 button click有自己的 这 . 为了保存 这 (模态)可以将其存储在变量中,然后再使用它。

$('#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>

Eduardo Santos 5 年前

你在展示你在onClick之前恢复的价值。在onClick中检索值将解析

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

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

    <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>