javascript - jQuery change() 不适用于第一个 onclick 事件，但适用于下一次连续点击

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>

所以当我点击按钮时，上面的模式打开，其中有一个输入框和一个添加按钮。当我输入一些数字，比如“5”并单击添加时，下面提到的 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());
      })
  });
});

此脚本有效，但从第二次点击开始。 第一次:我输入号码并点击添加。它没有改变。 第二次:我更改值并单击“添加”。该值发生变化并需要进一步点击。 一旦我重新加载页面并再次尝试，它就不会第一次工作。

我是否遗漏了脚本中的某些内容？谁能帮我解决这个问题。

Answer 1

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