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>

我想知道为什么计算无法自动进行。当不使用模式时，代码可以完美地工作

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

Answer 1

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

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

您可以通过.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>

您可以将脚本代码放在正文的底部，也可以用$(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>

Answer 2

我尝试了您提供的代码，一切正常！..

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<a href="#myModal" class="btn btn-settings" data-backdrop="false" data-toggle="modal">Open Modal</a>
<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>
</body>
<script>
$('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>
</html>

Answer 3

在这种情况下，通常我会考虑其他事件。

请记住，用户可能会粘贴数字或从自动完成字段等中选择！

最佳做法：

$(document).ready(function(){ 
 $('input').on('keypress change click blur keyup',function () {

   // your code 

  });
});

Answer 4

在打开运行js的模式或更新jquery / bootstrap版本时尝试创建事件。我尝试使用Bootstrap 4.3.1和jquery 3.4.1进行运行，它确实有效...问题可能是您的Bootstrap或jquery版本

Answer 5

对于动态添加的元素，您可以通过主体进行监听。

$('body').on("input", '#myModal input', function(e) {
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; 
});

Javascript无法在我的模式html上运行？

5 个答案: