Question

我有一个按钮如下：

<li class="cnt-li">
  <button class="btn-container" title="Add Container" data-toggle="modal" data-target=".add-ctn-modal">
    <img src="images/add.png" alt="Add Container">
  </button>
</li>

我有一个很长的模态div如下：

<div class="modal fade add-ctn-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-backdrop="false">
  <div class="modal-dialog modal-sm">
    <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">Add Container</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="ctn-num" class="control-label">Container Number:</label>
            <input type="text" class="form-control" id="ctn-num">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="add_btn_modal" data-dismiss="modal">Add</button>
      </div>
    </div>
  </div>
</div>

所以当我点击按钮时，上面的模态会打开，它有一个输入框和一个添加按钮。当我输入一些数字，比如说＆＃34; 5＆＃34;然后单击添加，下面提到的div中的文本需要更改为输入的值，在这种情况下为5 [默认情况下，值为0]。但它并没有改变。

这是div：

<div>
  <label id="ctn-info-label">Container Number : <span class="container-no">0</span></label>
</div>

我写了以下脚本来实现这个目标：

$(document).ready(function(){
  $('#add_btn_modal').click(function(e){
      e.preventDefault(); 
      $('#ctn-num').change(function(){
        $('.container-no').text($(this).val());
      })
  });
});

此脚本正在运行，但从第二次点击开始。第一次：输入数字，然后单击“添加”。它没有改变。第二次：我更改了值并单击Add。值会更改并进一步点击。一旦我重新加载页面并再次尝试，它第一次就不会工作了。

我在脚本中遗漏了什么吗？任何人都可以帮我这个。

Answer 1

您正在另一个更改处理程序中设置更改处理程序。内部处理程序只会在设置后触发（第一次单击后）。

Answer 2

$(document).ready(function(){
  $('#add_btn_modal').click(function(e){
      e.preventDefault(); 
      $('.container-no').text($('#ctn-num').val());
  });
});

http://jsfiddle.net/s129mm2L/

Answer 3

将其更改为：

$(document).ready(function(){
    $('#ctn-num').on("change", function(){
       $('.container-no').text($(this).val());
    });
 });

另外，我不确定为什么你只使用类来设置标签文本只显示一次。看起来你应该使用：

$(document).ready(function(){
    $('#ctn-num').on("change", function(){
       $('#ctn-info-label').text($(this).val());
    });
 });

jQuery change（）不适用于第一个onclick事件，但适用于下一次连续点击

3 个答案: