Javascript没有'；我不能在模态html上工作吗？_Javascript_Html

Javascript没有'；我不能在模态html上工作吗？

javascript html

Javascript没有'；我不能在模态html上工作吗？,javascript,html,Javascript,Html,我目前正在处理一个需要使用modal和js进行简单计算的问题这是我的密码 $（'input'）.keyup（function（）{//在值更改时运行 var firstValue=Number（$（'#first'）.val（））；//获取字段的值 var secondValue=Number（$（'#second'）.val（））；//将其转换为浮点 var thirdValue=Number（$（'#third'）.val（））； var fourthValue=Number（$（'#f

我目前正在处理一个需要使用modal和js进行简单计算的问题这是我的密码

$（'input'）.keyup（function（）{//在值更改时运行
var firstValue=Number（$（'#first'）.val（））；//获取字段的值
var secondValue=Number（$（'#second'）.val（））；//将其转换为浮点
var thirdValue=Number（$（'#third'）.val（））；
var fourthValue=Number（$（'#fourth'）.val（））；
$（'#total_expenses1'）.html（firstValue+secondValue+thirdValue+fourthValue）；//添加并输出它们
document.getElementById（'total_expense2'）。value=firstValue+secondValue+thirdValue+fourthValue；
});
这里是模态代码
&时代；
设置
计算










总计：

总计：



取消
拯救
您的代码似乎是在DOM完全加载之前执行的
您可以通过以下方式解决此问题：
您可以使用.on（）
使用事件委派方法，这将确保事件将附加到稍后添加到文档中的元素
$('body').on('keyup', 'input', function(){...




$（'body'）。在（'keyup'，'input'，function（）{//上，在值更改时运行
var firstValue=Number（$（'#first'）.val（））；//获取字段的值
var secondValue=Number（$（'#second'）.val（））；//将其转换为浮点
var thirdValue=Number（$（'#third'）.val（））；
var fourthValue=Number（$（'#fourth'）.val（））；
$（'#total_expenses1'）.html（firstValue+secondValue+thirdValue+fourthValue）；//添加并输出它们
document.getElementById（'total_expense2'）。value=firstValue+secondValue+thirdValue+fourthValue；
});
这里是模态代码
&时代；
设置
计算











总数：


总数：



取消
拯救
我尝试了您提供的代码，它工作正常
<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>


&时代；
设置
计算











总数：


总数：



取消
拯救
$（'input'）.keyup（函数（）{//在值更改时运行
var firstValue=Number（$（'#first'）.val（））；//获取字段的值
var secondValue=Number（$（'#second'）.val（））；//将其转换为浮点
var thirdValue=Number（$（'#third'）.val（））；
var fourthValue=Number（$（'#fourth'）.val（））；
$（'#total_expenses1'）.html（firstValue+secondValue+thirdValue+fourthValue）；//添加并输出它们
document.getElementById（'total_expense2'）。value=firstValue+secondValue+thirdValue+fourthValue；}）；
对于这种情况，通常我会考虑其他事件。
请记住，用户可能会粘贴数字或选择自动完成字段等
最佳做法：
$(document).ready(function(){ 
 $('input').on('keypress change click blur keyup',function () {

   // your code 

  });
});



尝试在打开运行js的模式或更新jquery/bootstrap版本时创建事件。我试着用Bootstrap4.3.1和jQuery3.4.1运行，结果成功了。。。问题可能是您的引导程序或jquery版本
对于动态添加的元素，您已经通过主体进行了侦听
$('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; 
});

这很奇怪，因为它对我的不起作用。你能复制并粘贴我提供的代码并尝试确认吗？