javascript - Javascript 不适用于我的模态 html？

Question

我目前正在处理一个需要使用模态和 js 进行简单计算的问题，这里是我的代码

$('input').keyup(function() { // run anytime the value changes
  var firstValue = Number($('#first').val()); // get value of field
  var secondValue = Number($('#second').val()); // convert it to a float
  var thirdValue = Number($('#third').val());
  var fourthValue = Number($('#fourth').val());

  $('#total_expenses1').html(firstValue + secondValue + thirdValue + fourthValue); // add them and output it
  document.getElementById('total_expenses2').value = firstValue + secondValue + thirdValue + fourthValue;
});

<a href="#myModal" class="btn btn-settings" data-backdrop="false" data-toggle="modal">Open Modal</a> and here the modal code


<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Settings</h4>

      </div>
      <div class="modal-body">
        <h3>Calc</h3>

        <input id='first' type="text" class="form-control formBlock" name="bus_ticket" placeholder="Bus Ticket..." required/><br />

        <input id='second' type="text" class="form-control formBlock" name="plane_ticket" placeholder="Plane Ticket..." required/><br />

        <input id='third' type="text" class="form-control formBlock" name="hotel_expenses" placeholder="Hotel Expenses..." required/><br />

        <input id='fourth' type="text" class="form-control formBlock" name="eating_expenses" placeholder="Eating Expenses..." required/><br />
        <br /><br /> Total: <span id="total_expenses1"></span>
        <br /> Total: <input id='total_expenses2' type="text" class="form-control formBlock" name="funding" placeholder="Total Expenses..." />

        <br /><br />

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button id="loadpage" type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

我想知道为什么计算不能自动工作。不使用模态时，代码完美运行

但是当我使用模态时，计算不起作用

标签： javascripthtml

Answer 1

似乎您的代码在 DOM 完全加载之前正在执行。

您可以通过以下方式解决问题：

1. 您可以使用事件委托方法来.on()确保事件将附加到稍后添加到文档中的元素。

   $('body').on('keyup', 'input', function(){...
   

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<script>
  $('body').on('keyup', 'input', function(){ // run anytime the value changes
    var firstValue  = Number($('#first').val());   // get value of field
    var secondValue = Number($('#second').val()); // convert it to a float
    var thirdValue  = Number($('#third').val());
    var fourthValue = Number($('#fourth').val());

    $('#total_expenses1').html(firstValue + secondValue + thirdValue + fourthValue); // add them and output it
    document.getElementById('total_expenses2').value = firstValue + secondValue + thirdValue + fourthValue; 
  });
</script>

<a href="#myModal" class="btn btn-settings" data-backdrop="false" data-toggle="modal">Open Modal</a>
and here the modal code

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
     <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Settings</h4>  

                    </div>
                    <div class="modal-body">
                    <h3>Calc</h3>

                     <input id='first' type="text" class="form-control formBlock" name="bus_ticket"  placeholder="Bus Ticket..." required/><br />

                     <input id='second' type="text" class="form-control formBlock" name="plane_ticket"  placeholder="Plane Ticket..." required/><br />

                     <input id='third' type="text" class="form-control formBlock" name="hotel_expenses"  placeholder="Hotel Expenses..." required/><br />

                    <input id='fourth' type="text" class="form-control formBlock" name="eating_expenses"  placeholder="Eating Expenses..." required/><br />
                     <br /><br />
                     Total: <span id="total_expenses1"></span>
                                          <br />
                     Total: <input id='total_expenses2' type="text" class="form-control formBlock" name="funding"  placeholder="Total Expenses..."/>

                       <br /><br />
              </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button id="loadpage" type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

2. 您可以将脚本代码放在正文的底部，也可以用$(document).ready(function(){...});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<script>
  $(document).ready(function(){
    $('input').keyup(function(){ // run anytime the value changes
      var firstValue  = Number($('#first').val());   // get value of field
      var secondValue = Number($('#second').val()); // convert it to a float
      var thirdValue  = Number($('#third').val());
      var fourthValue = Number($('#fourth').val());

      $('#total_expenses1').html(firstValue + secondValue + thirdValue + fourthValue); // add them and output it
      document.getElementById('total_expenses2').value = firstValue + secondValue + thirdValue + fourthValue; 
    });
  });
</script>

<a href="#myModal" class="btn btn-settings" data-backdrop="false" data-toggle="modal">Open Modal</a>
and here the modal code

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
     <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Settings</h4>  

                    </div>
                    <div class="modal-body">
                    <h3>Calc</h3>

                     <input id='first' type="text" class="form-control formBlock" name="bus_ticket"  placeholder="Bus Ticket..." required/><br />

                     <input id='second' type="text" class="form-control formBlock" name="plane_ticket"  placeholder="Plane Ticket..." required/><br />

                     <input id='third' type="text" class="form-control formBlock" name="hotel_expenses"  placeholder="Hotel Expenses..." required/><br />

                    <input id='fourth' type="text" class="form-control formBlock" name="eating_expenses"  placeholder="Eating Expenses..." required/><br />
                     <br /><br />
                     Total: <span id="total_expenses1"></span>
                                          <br />
                     Total: <input id='total_expenses2' type="text" class="form-control formBlock" name="funding"  placeholder="Total Expenses..."/>

                       <br /><br />
              </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button id="loadpage" type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>