当我使用 jQuery 从“追加”添加文本时，文本没有显示

The text is not displaying when I add it from "append" using jQuery

本文关键字：文本 添加 显示 追加 jQuery      更新时间：2023-09-26

$(window).load(function(){
  var value = $( '#event-id' ).text();
  $(window).ready(function(){
    $('#send-event').click(function(){
      // alert('clicked');
      $( ".events" ).append( '<li class="event-item">' + value + '</li>' );
    })
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Add Event
  </button>
  <div class="row">
    <div class="col-md-3">
      <ul class="events">
        <li class="event-item"></li>
      </ul>
    </div>
  </div>
</div>
<!-- Modal  -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <input type="text" name="event-input" id="event-id">
      </div>
      <div class="modal-footer">
        <button type="button" id="send-event" class="btn btn-success" data-dismiss="modal">Add Event</button>
      </div>
    </div>
  </div>
</div>

这是我开发用于从modal中的input附加文本的代码，问题是li标签正在附加，而不是其中的文本。

我

真的无法理解我犯了什么错误，谁能解释一下犯了什么错误。

这是小提琴链接。

如另一个答案所述，您正在使用输入元素，因此您应该使用 val 而不是 text 。但是，仅凭这一点并不能解决此问题，因为变量是在函数外部定义的。

它应该在点击功能中，所以它会在每次点击事件中更新。要清除输入，只需将值设置为 n 空字符串。

$(window).load(function(){
  
  $(document).ready(function(){
    $('#send-event').click(function(){
       var value = $( '#event-id' ).val();
      $( ".events" ).append( '<li class="event-item">' + value + '</li>' );
      $("#event-id").val("");
    })
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Add Event
  </button>
  <div class="row">
    <div class="col-md-3">
      <ul class="events">
        <li class="event-item"></li>
      </ul>
    </div>
  </div>
</div>
<!-- Modal  -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <input type="text" name="event-input" id="event-id">
      </div>
      <div class="modal-footer">
        <button type="button" id="send-event" class="btn btn-success" data-dismiss="modal">Add Event</button>
      </div>
    </div>
  </div>
</div>

更改 

var value = $( '#event-id' ).text();

自 

var value = $( '#event-id' ).val();

由于该$( '#event-id' )会在$('#send-event')次点击之间发生变化，因此您可能不希望在点击处理程序之外缓存其值（这是您想要的.val()，而不是.text()）。否则，$( '#event-id' ).val()将永远是页面首次加载时的任何内容。

$(window).load(function(){
  
  $(window).ready(function(){
    $('#send-event').click(function(){
      var value = $( '#event-id' ).val();
      // alert('clicked');
      $( ".events" ).append( '<li class="event-item">' + value + '</li>' );
    })
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Add Event
  </button>
  <div class="row">
    <div class="col-md-3">
      <ul class="events">
        <li class="event-item"></li>
      </ul>
    </div>
  </div>
</div>
<!-- Modal  -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <input type="text" name="event-input" id="event-id">
      </div>
      <div class="modal-footer">
        <button type="button" id="send-event" class="btn btn-success" data-dismiss="modal">Add Event</button>
      </div>
    </div>
  </div>
</div>

相关文章：