jquery - 添加更多行的简单计算器
问题描述
我正在制作简单的计算器并尝试通过 jQuery 添加更多行,但它们不起作用。为什么其他行不起作用?
$('.product').keyup(function() {
var total = (this.value * $(this).next('.qty').val()) || 0;
$(this).next().next('.total').val(total);
var dis = (total * $(this).next().next().next('.dis').val() / 100) || 0;
var grand = (total - dis) || 0;
$(this).next().next().next().next('.grand').val(grand);
}).keyup();
$('.qty').keyup(function() {
var total = (this.value * $(this).prev('.product').val()) || 0;
$(this).next('.total').val(total);
var dis = (total * $(this).next().next('.dis').val() / 100) || 0;
var grand = (total - dis) || 0;
$(this).next().next().next('.grand').val(grand);
}).keyup();
$('.dis').keyup(function() {
var total = ($(this).prev('.total').val()) || 0;
var dis = (total * this.value / 100) || 0;
var grand = (total - dis) || 0;
$(this).next('.grand').val(grand);
}).keyup();
$(document).ready(function() {
$("#btn1").click(function() {
$(".tableblock").append('<div class="w-100 d-none d-md-block"></div><input type="text" onkeydown="return ( event.ctrlKey || event.altKey || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) || (95<event.keyCode && event.keyCode<106) || (event.keyCode==8) || (event.keyCode==9) || (event.keyCode>34 && event.keyCode<40) || (event.keyCode==46) )" id="product" class="product" name="fir" /> <input type="text" id="qty" class="qty" name="qty" value="1" /> <input type="text" id="total" class="total" name="total" readonly/> <input type="text" id="dis" class="dis" name="dis" value="20" maxlength="2"/> <input type="text" id="grand" class="grand" name="grand" readonly/>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tableblock">
<input type="text" onkeydown="return ( event.ctrlKey || event.altKey
|| (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
|| (95<event.keyCode && event.keyCode<106)
|| (event.keyCode==8) || (event.keyCode==9)
|| (event.keyCode>34 && event.keyCode<40)
|| (event.keyCode==46) )" id="product" class="form-control product" name="fir" />
<input type="text" id="qty" class="form-control qty" name="qty" value="1" />
<input type="text" id="total" class="form-control total" name="total" readonly/>
<input type="text" id="dis" class="form-control dis" name="dis" value="20" maxlength="2" />
<input type="text" id="grand" class="form-control grand" name="grand" readonly/>
</div>
<button id="btn1" class="btn btn-primary">+</button>
解决方案
因为下一行是动态附加的(在 DOM 之后)所以你需要使用.on
$(document).on('keyup', '.product', function() {
var total = (this.value * $(this).next('.qty').val()) || 0;
$(this).next().next('.total').val(total);
var dis = (total * $(this).next().next().next('.dis').val() / 100) || 0;
var grand = (total - dis) || 0;
$(this).next().next().next().next('.grand').val(grand);
}).keyup();
$(document).on('keyup', '.qty', function() {
var total = (this.value * $(this).prev('.product').val()) || 0;
$(this).next('.total').val(total);
var dis = (total * $(this).next().next('.dis').val() / 100) || 0;
var grand = (total - dis) || 0;
$(this).next().next().next('.grand').val(grand);
}).keyup();
$('.dis').on('keyup', function() {
var total = ($(this).prev('.total').val()) || 0;
var dis = (total * this.value / 100) || 0;
var grand = (total - dis) || 0;
$(this).next('.grand').val(grand);
}).keyup();
$(document).ready(function() {
$(document).on('click', "#btn1", function() {
$(".tableblock").append('<div class="w-100 d-none d-md-block"></div><input type="text" onkeydown="return ( event.ctrlKey || event.altKey || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) || (95<event.keyCode && event.keyCode<106) || (event.keyCode==8) || (event.keyCode==9) || (event.keyCode>34 && event.keyCode<40) || (event.keyCode==46) )" id="product" class="product" name="fir" /> <input type="text" id="qty" class="qty" name="qty" value="1" /> <input type="text" id="total" class="total" name="total" readonly/> <input type="text" id="dis" class="dis" name="dis" value="20" maxlength="2"/> <input type="text" id="grand" class="grand" name="grand" readonly/>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tableblock">
<input type="text" onkeydown="return ( event.ctrlKey || event.altKey
|| (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
|| (95<event.keyCode && event.keyCode<106)
|| (event.keyCode==8) || (event.keyCode==9)
|| (event.keyCode>34 && event.keyCode<40)
|| (event.keyCode==46) )" id="product" class="form-control product" name="fir" />
<input type="text" id="qty" class="form-control qty" name="qty" value="1" />
<input type="text" id="total" class="form-control total" name="total" readonly/>
<input type="text" id="dis" class="form-control dis" name="dis" value="20" maxlength="2" />
<input type="text" id="grand" class="form-control grand" name="grand" readonly/>
</div>
<button id="btn1" class="btn btn-primary">+</button>
推荐阅读
- android - ViewPager2 的 AdMob 原生视频广告?
- java - 为什么“获取”错误类型的数据时,ResultSet 中的 get() 不抛出异常?
- python - 从 HTML 中提取特定列
- android - Android Studio Flutter 中没有“删除小部件”或“用其子代替换小部件”
- html - html和文本格式
- parsing - 从概率上下文无关语法生成的所有句子在语法上都是正确的吗?
- python - 在终端上打印 HTTP 标头
- uitableview - 在 Swift 5 中为 TableView 单元格创建圆形栏和自定义滑动?
- react-native - 我如何制作一个按钮,当点击下载应用程序的最新内容时?
- reactjs - array.reduce 不是 reactjs 中的函数